LoginSignup
5
5

More than 3 years have passed since last update.

【Flutter】showDatePickerで誕生日を指定させよう

Posted at

Flutterでは、ユーザーに「日付」を選択させたいときはshowDatePickerメソッドを使います。
UIは下の画像みたいな感じ。

image.png

これを使えば「誕生日を要求する」こともできます。
少し使い方にクセがあると感じたので、今回は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歳」に範囲制限しています。

ちなみにDateTime型の形式は以下の通り。
image.png

もし「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ウィジェットを実装できると思います。

5
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
5