[Flutter]日付を選択できるようにするには？

どうも、ちょげ(@chogetarou)です。

Flutterで、ユーザーが日付を選択できるようにする方法を紹介します。

方法

日付を選択できるようにするには、「DatePicker」を使います。

この「DatePicker」は、次の流れで使います。

1. 選択した日付を持たせる変数を用意
2. DatePickerを表示する関数を用意
3. ボタンのタップやスワイプなどのトリガーに関数を指定

Step.1

まず、選択した日付を格納する変数を用意します。

DateTime? selectedDate;

変数は、「DateTime?」型にします。

Step.2

次に、「DatePicker」を表示する関数を用意します。

  Future _pickDate(BuildContext context) async {
    //DatePickerの初期値
    final initialDate = DateTime.now();
    //DatePickerを表示し、選択されたら変数に格納する
    final newDate = await showDatePicker(
        context: context,
        //初期値を設定
        initialDate: initialDate,
        //選択できる日付の上限
        firstDate: DateTime(DateTime.now().year - 2),
        lastDate: DateTime(DateTime.now().year + 2));

    //nullチェック
    if (newDate != null) {
      //選択された日付を変数に格納
      setState(() => selectedDate = newDate);
    } else {
      //nullならば何もしない
      return;
    }
  }

「showDatePicker関数」を呼び出すと、ピッカーが表示されます。

このピッカーで選択し終わる、関数の処理が再開されます。

選択し終わった後は、日付を保持するための変数に、選択した日付を代入します。

「showDatePicker関数」は、「DatePicker」を表示するための関数です。

引数では、「DatePicker」の設定を行います。

• initialDate : 日付の初期値
• firstDate : 選択できる日付の上限 （過去の方）
• lastDate : 選択できる日付の上限（未来の方）

showTimePicker function - material library - Dart API

API docs for the showTimePicker function from the material library, for the Dart programming language.

api.flutter.dev

Step.3

最後に、ボタンのタップやスワイプなどに、用意した関数を指定します。

ElevatedButton(
              onPressed: () => _pickDate(context),
              child: const Text("Pick Date"))

全体のコード

class Sample extends StatefulWidget {
  Sample({Key? key}) : super(key: key);

  @override
  _SampleState createState() => _SampleState();
}

class _SampleState extends State<Sample> {
  DateTime? selectedDate;

  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(selectedDate != null ? selectedDate.toString() : "Date"),
          SizedBox(
            height: 20,
          ),
          ElevatedButton(
              onPressed: () => _pickDate(context),
              child: const Text("Pick Date"))
        ],
      ),
    );
  }

  Future _pickDate(BuildContext context) async {
    //DatePickerの初期値
    final initialDate = DateTime.now();
    //DatePickerを表示し、選択されたら変数に格納する
    final newDate = await showDatePicker(
        context: context,
        //初期値を設定
        initialDate: initialDate,
        //選択できる日付の上限
        firstDate: DateTime(DateTime.now().year - 2),
        lastDate: DateTime(DateTime.now().year + 2));

    //nullチェック
    if (newDate != null) {
      //選択された日付を変数に格納
      setState(() => selectedDate = newDate);
    } else {
      //nullならば何もしない
      return;
    }
  }
}