[Flutter]カレンダーで日付入力をするには?

Flutter

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

カレンダーを使って、日付の入力をするには、どうしたらいいのでしょうか?

スポンサーリンク

方法

カレンダー, 日にち, 月, 日, 週, スケジュール, リマインダー, 主催者

カレンダーで日付の入力をするには、「DatePicker」を使います。

まず、入力した日付を受け取るための変数を用意します。

DateTime? selectedDate;

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

次に、日付の入力をしてもらうための関数を用意します。

  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」がダイアログ表示されます。

なので、「DatePicker」は手動で表示する必要はなく、「showDatePicker関数」を使って表示します。

「showDatePicker」は、次の引数を指定して使います。

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

他の引数では、表示する「DatePicker」の設定をすることが出来ます。

最後に、ボタンやテキストタップなどのトリガーに、用意した関数を設定します。

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

ここでは、ボタンを使っていますが、他のトリガーでも同じように指定します。

これで日付をカレンdなーで入力できるようになります。

コメント

タイトルとURLをコピーしました