[Flutter]「DatePicker」の使い方

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

日付を選択することができる「DatePicker」の使い方を解説します。

使い方
まとめ

使い方

変数

まず、DatePickerで選択した日付を、保持するための変数を用意します。

DateTime? selectedDate;

関数

次に、「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関数」を呼び出すと、上のような「DatePicker」が表示されます。

この関数に「await」を指定することで、ユーザーが操作を終えてから処理を再開するようになります。

showDatePicker関数の引数では、主に次のようなものを指定します。

context : コンテキスト
initialDate : 初期値
firstDate : 日付の上限（過去の方）
lastDate : 日付の上限（未来の方）

showTimePicker function - material library - Dart API

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

表示

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

  @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"))
        ],
      ),
    );
  }