Textfieldを利用

本日の内容

• TextFieldで数字のみを受け付ける

TextField

参考にした記事

テキスト入力 | Flutter Doc JP

Flutterで数値のみを入力できるTextFieldを作成する - Qiita

[Flutter] TextFormFieldとアイコンを横並びに配置しようとするとビルド時にエラーが出た。 - Qiita

 Flexible(
                              child: TextField(
                                decoration:InputDecoration(
                                    border: OutlineInputBorder()
                                ),
                                enabled:true,
                                maxLength: 3,
                                keyboardType: TextInputType.number,
                                inputFormatters: [FilteringTextInputFormatter.digitsOnly],

                              )
                          ),

勉強になったこと

• textfieldにはwidthとheightの情報がないので、他のオブジェクトと一緒に配置する場合はFlexibleなどを利用して調整する

• 今回はキーボードから数字のみを入力にしたかったので、keyboardTypeとinputFormattersを指定。

  • keyboardType: 表示されるキーボードを指定

  • inputFormatters: 入力できるテキストのタイプを指定

• maxLength:で文字列の長さを指定

• enabled:true,で入力を受け付ける設定にする

• decorationで枠線を設計