20
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

flutter 生年月日の入力欄実装(これドラムロールって言うんやの巻)

Last updated at Posted at 2022-12-21

はじめに

・筆者はflutter初心者です(flutter歴:約1ヶ月程度)
・元々バックエンドでJava/SpringBootを触っていましたが、
 機能横断的なスクラムチームを作るために先月フロントエンドに移動
・自分の復習、備忘録用に書きました

生年月日の入力をドラムロールでやりたいと思ったきっかけ

バリデーション実装の際、他のアプリでどのようなものがあるかみていた時に
生年月日の入力欄は、選択するもの(ドラムロール)が多く、
自分で入力するより確かに選択できた方がユーザーからすると楽で良いなと思い
バリデーションもつけなくて良くなるので(必須以外)やってみようと思ったのがきっかけです!

まず、これドラムロールって言うんや

:mag:「 flutter 生年月日入力 」 とかで検索するとまず出てくるのは、DatePickerを使ったカレンダー入力

ただこれだとUI的に良くないという記事を発見・・・:eyes:
確かに生年月日の入力には向いてなさそうだなと思いました

なので、DatePickerではなく、DateTimePickerというパッケージを使用します!

:point_down_tone4:よく見るこの西暦の選択式のやつはドラムロールってゆうんやって思いましたね(初耳

スクリーンショット 2022-12-20 21.21.35.png

ドラムロール実装参考記事(DateTimePicker)

参考記事もいくつかあって分かりやすく、実装できたのですが・・
Textで表示させるだけの記事が多くTextFieldに反映したいがやり方がわからず少し手こずりました

TextFieldに選択した生年月日を反映させる

TextFieldの入力値を管理するのにcontrollerが必要みたいです

:point_down_tone3:TextFieldにTextEditingController()を設定する

controller.dart
final controller = TextEditingController();
controller.dart
TextField(controller: controller),

こちらの記事を抜粋すると

onConfirm ではユーザが完了ボタンを押した際の処理を記述します。
TextField の onSubmitted と似たプロパティです。

と記載があったので下記のようにonConfirm内に選択した値を反映させるように書きました!

date_time_picker.dart
//〜ソースコード省略〜
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ヶ月程ですが、とても楽しく沼りそうです・・:ramen:
同じようにドラムロールを実装したい人の参考になれば幸いです。

20
6
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
20
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?