[Flutter]TextFieldをタップした時にDatePickerを表示するには？

どうも、ちょげ(@chogetarou)です。

TextFieldをタップした時にDatePickerを表示するには、どうしたらいいのでしょうか？

方法

TextFieldをタップした時に、DatePickerを表示するには、TextFieldの引数「onTap」を使います。

          TextField(
            controller: textEditinController,
            onTap: () async {

              final newSelectDate = await showDatePicker(
                  context: context,
                  initialDate: DateTime.now(),
                  firstDate: DateTime(DateTime.now().year - 3),
                  lastDate: DateTime(DateTime.now().year + 3));
            },

          )

これでTextFieldをタップすると、DatePickerが表示されるようになります。

日付を入力するには？

DatePickerを使ってTextFieldに入力するには、TextEditingControllerを使います。

まず、変数を用意します。

final textEditinController = TextEditingController();

次に、この変数をTextFieldに設定します。

TextField(
       controller: textEditinController,
  )

TextField(
            controller: textEditinController,
            onTap: () async {
              final newSelectDate = await showDatePicker(
                  context: context,
                  initialDate: DateTime.now(),
                  firstDate: DateTime(DateTime.now().year - 3),
                  lastDate: DateTime(DateTime.now().year + 3));

              if (newSelectDate != null) {
                textEditinController.text = newSelectDate.toString();
              }
            },
          )