どうも、ちょげ(@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;
}
}
この関数を呼び出すと、カレンダーで日付を選択するための画面が表示されます。
最後に、ボタンやテキストタップなどのトリガーに、用意した関数を設定します。
ElevatedButton(
onPressed: () => _pickDate(context),
child: const Text("Pick Date"))
ここでは、ボタンを使っていますが、他のトリガーでも同じように指定します。
これで日付をカレンdなーで入力できるようになります。
コメント