【Flutter】ダイアログで日時を入力させる方法について

はじめに

今回は日時をダイアログで入力させる方法について書いていきたいと思います。
日付だけ、時間だけを入力する内容のサイトはあったのですが、日時の入力についてはあまり見つかりませんでした。
なので、日時入力の実装時に調べたことや思いついた内容について書いていきたいと思います。

日時を入力させる方法について

日時を入力させる日時選択ダイアログは公式に用意されておらず、pub.devなどに公開されているパッケージを追加する必要がありました。
ただ、パッケージを追加するとパッケージの管理をする必要があるので、あまり追加したくない場合もあるかと思います。またパッケージがメンテナンスされなくなる可能性等も考慮する必要が出ていきます。

公式に日時選択ダイアログはないですが、日付を入力させるshowDatePicker、時間を入力させるshowTimePickerのメソッドが用意されています。

final pickedDate = await showDatePicker(
       context: context,
       initialDate: DateTime.now(),
       firstDate: DateTime(2000),
       lastDate: DateTime(2100));

showDatePicker()
context : BuildContext
initialDate : カレンダーの初期日付
firstDate : 選択可能な最小の日付
lastDate : 選択可能な最大の日付

final pickedTime =
       await showTimePicker(context: context, initialTime: TimeOfDay.now());

showTimePicker()
context : BuildContext
initialTime : 初期時間

単純ですが、この2つを連続で使用することで日時を入力させることを実現することができます。

String _pickedDateTime = "";


 void _selectDateTime() async {
   // showDatePickerで日付を選択する
   final pickedDate = await showDatePicker(
       context: context,
       initialDate: DateTime.now(),
       firstDate: DateTime(2000),
       lastDate: DateTime(2100));


   // 日付が選択されなかった場合は早期return
   if (pickedDate == null) return;


   // showTimePickerで時間を選択する
   if (!context.mounted) return;
   final pickedTime =
       await showTimePicker(context: context, initialTime: TimeOfDay.now());


   // 時間が選択されなかった場合は早期return
   if (pickedTime == null) return;


   // 選択した日付と時間を結合する
   final dateTime = DateTime(pickedDate.year, pickedDate.month, pickedDate.day,
       pickedTime.hour, pickedTime.minute);


   setState(() {
     _pickedDateTime = dateTime.toString();
   });
｝

上記のようなコードを書くことにより、日付選択ダイアログ→時間選択ダイアログと連続で開いて選択させることができて、選択された日時のdateTimeを作成することができます。

日付と時間を連続で選択する

おわりに

今回は日時を選択させるダイアログについて書いていきました。
showDatePickerやshowTimePickerについても実装時に色々調査したので、その内容も書いていきたいと思います。