Flutterでは、ユーザーに「日付」を選択させたいときはshowDatePickerメソッドを使います。
UIは下の画像みたいな感じ。
これを使えば「誕生日を要求する」こともできます。
少し使い方にクセがあると感じたので、今回はshowDatePickerの基本的な使い方を紹介します。
main.dart
RaisedButton(
child: Text('誕生日を設定する'),
onPressed: () async {
final date = await showDatePicker(
context: context,
locale: const Locale("ja"), //日本語化(アプリ自体を日本語対応させる必要があります。今回は省略させていただきます)
initialDatePickerMode: DatePickerMode.year, //最初に年から入力させる
initialDate: DateTime(DateTime.now().year - 10), //最初に選択させる日付(今回は10年前)
firstDate: DateTime(DateTime.now().year - 100, DateTime.now().month, DateTime.now().day), //選択可能な、もっとも古い日付(今回は100年前の今日にしています)
lastDate: DateTime(DateTime.now().year - 6, DateTime.now().month, DateTime.now().day), ////選択可能な、もっとも新しい日付(今回は6年前の今日にしています)
);
if (date != null) {
//誕生日を取得した後の処理をここに書く
}
},
),
ざっとこんな感じ。(なお、今回は日本語化に関しての詳細は省かせていただきます。)
main.dart
initialDatePickerMode: DatePickerMode.year, //最初に年から入力させる
これで「年」から入力させるようにできます。
誕生日なんかはいきなり月日からではなく、まずは年から選択させたいことが多いので、これは多用するかも。
main.dart
initialDate: DateTime(DateTime.now().year - 10), //最初に選択させる日付(今回は10年前)
これは日付選択のポップアップが表示されたとき、一番最初に選ばれている日付を設定します。
main.dart
firstDate: DateTime(DateTime.now().year - 100, DateTime.now().month, DateTime.now().day), //選択可能な、もっとも古い日付(今回は100年前の今日にしています)
lastDate: DateTime(DateTime.now().year - 6, DateTime.now().month, DateTime.now().day), ////選択可能な、もっとも新しい日付(今回は6年前の今日にしています)
ここでは「日付選択の範囲」を設定しています。
さすがに0歳児に扱わせるわけにもいかず、かえって200、300歳の超絶高齢者がいるわけでもないので、とりあえず今回は「6歳~100歳」に範囲制限しています。
もし「10年3か月4日前」と表現させたい場合は、上記に沿って考えると
DateTime(DateTime.now().year - 10, DateTime.now().month - 3, DateTime.now().day - 4)
と表現できますし、「10年4日前」と表現させたい場合は
DateTime(DateTime.now().year - 10, DateTime.now().month, DateTime.now().day - 4)
と表現できます。
main.dart
if (date != null) {
//誕生日を取得した後の処理をここに書く
}
最後に、showDatePickerメソッド外のこの記述ですが、日付無選択ならnullが返ってくるので「日付を選択されたとき」のみ処理を実行させるようにしています。
上のコードをコピペすれば、とりあえずshowDatePickerを表示するRaisedButtonウィジェットを実装できると思います。