【Flutter】 showDatePicker로 생일을 지정합시다.

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세」에 범위 제한하고 있습니다.

덧붙여서 DateTime형의 형식은 이하와 같다.


만약 「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 위젯을 구현할 수 있다고 생각합니다.