はじめに
・筆者はflutter初心者です(flutter歴:約1ヶ月程度)
・元々バックエンドでJava/SpringBootを触っていましたが、
機能横断的なスクラムチームを作るために先月フロントエンドに移動
・自分の復習、備忘録用に書きました
生年月日の入力をドラムロールでやりたいと思ったきっかけ
バリデーション実装の際、他のアプリでどのようなものがあるかみていた時に
生年月日の入力欄は、選択するもの(ドラムロール)が多く、
自分で入力するより確かに選択できた方がユーザーからすると楽で良いなと思い
バリデーションもつけなくて良くなるので(必須以外)やってみようと思ったのがきっかけです!
まず、これドラムロールって言うんや
「 flutter 生年月日入力 」 とかで検索するとまず出てくるのは、DatePickerを使ったカレンダー入力
ただこれだとUI的に良くないという記事を発見・・・
確かに生年月日の入力には向いてなさそうだなと思いました
なので、DatePickerではなく、DateTimePickerというパッケージを使用します!
よく見るこの西暦の選択式のやつはドラムロールってゆうんやって思いましたね(初耳
ドラムロール実装参考記事(DateTimePicker)
参考記事もいくつかあって分かりやすく、実装できたのですが・・
Textで表示させるだけの記事が多くTextFieldに反映したいがやり方がわからず少し手こずりました
TextFieldに選択した生年月日を反映させる
TextFieldの入力値を管理するのにcontrollerが必要みたいです
TextFieldにTextEditingController()を設定する
final controller = TextEditingController();
TextField(controller: controller),
こちらの記事を抜粋すると
onConfirm ではユーザが完了ボタンを押した際の処理を記述します。
TextField の onSubmitted と似たプロパティです。
と記載があったので下記のようにonConfirm内に選択した値を反映させるように書きました!
//〜ソースコード省略〜
DatePicker.showDatePicker(context,showTitleActions: true,
minTime: DateTime(1950, 1, 1),maxTime: DateTime(2022, 8, 17),
onConfirm: (date) {
//ユーザが完了ボタンを押した際の処理
textController.value = TextEditingValue(text: '${date.year}/${date.month}/${date.day}');
//〜ソースコード省略〜
}
さいごに
flutterを触り始めてまだ1ヶ月程ですが、とても楽しく沼りそうです・・
同じようにドラムロールを実装したい人の参考になれば幸いです。