[Flutter]DatePickerでTextFormFieldに入力するには?

Flutter

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

DatePickerでTextFormFieldに入力するには、どうしたらいいのでしょうか?

スポンサーリンク

方法

インターフェース, インターネット, プログラム, ブラウザ, Www

まず、TextEditinControllerを用意します。

final textEditingController = TextEditingController();

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

TextFormField(
     controller: textEditingController,
 )

そして、TextFormFieldをDatePickerで入力するための関数を用意します。

 Future _getDate(BuildContext context) async {
    final initialDate = DateTime.now();

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

    if (newDate != null) {
     //選択した日付をTextFormFieldに設定
      textEditingController.text = newDate.toString();
    } else {
      return;
    }
  }

TextFormFieldに設定したTextEditinControllerのtextプロパティに、選択した日付を代入します。

これで、DatePickerでTextFormFieldに入力できるようになります。

あとは、ボタンやタップなどのトリガーで、この関数を呼び出してあげるだけです。

TextFormField(
            controller: textEditingController,
            onTap: () {
              _getDate(context);
            },
          )

上記は、TextFormFieldをタップした時に、DatePickerを呼び出す例です。

コメント

タイトルとURLをコピーしました