すらぼうの開発ノート

flutterエンジニアのメモ

【Flutter】TextFormFieldのデザイン設定まとめ

本エントリではパターン別にTextFormFieldのデザイン設定を説明する。



TextFormFieldとは

TextFormFieldユーザーに文字列を入力してもらうためのテキストフォーム作成用ウィジェット

api.flutter.dev

TextFieldを拡張しているクラスなので、TextFieldで使用できるプロパティは全て使用できる。

TextFormFieldのデザインを設定する場合はdecorationプロパティにInputDecorationを指定することで行う。

api.flutter.dev


パターン別デザイン

デフォルト

デフォルトのデザインは以下の通り。そのままだと見にくいのでPaddingでラップしている。

TextFormFieldデフォルトデザイン(非選択状態)

TextFormFieldデフォルトデザイン(選択状態)

ヒント文字あり

ヒント文字はTextFormFieldを非選択状態でフォーム内に表示されている文字。 選択状態になり文字が入力されると非表示になる。

ヒント文字表示状態

選択して文字を入力した状態

枠線あり

枠線はborderプロパティにOutlineInputBorder()を指定することで設定する。

枠線あり(非選択状態)

枠線あり(選択状態)

背景色あり

背景色はfillColorプロパティに色を指定し、filledtrueに設定する。

背景色あり(非選択状態)

背景色(選択状態)

選択時の枠線の色

focusedBorderOutlineInputBorderを設定すると、テキストフォームを選択した際の枠線の色を設定できる。

選択時の枠線の色

OutlineInputBorderborderSideBorderSide()を指定することで色を設定する。

ラベルテキストあり

ラベルテキストはテキストフォームを選択していない状態だとヒントテキストのような表示になる。 テキストフォームを選択すると枠上部にサイズが小さくなって表示され続ける。

labelTextプロパティに表示したい文字列を指定すればよい。

ラベルテキストあり(非選択状態)

ラベルテキストあり(選択状態)

アイコンあり(テキストフォーム外)

テキストフォームの横にアイコンを表示する場合、iconプロパティにIcon()ウィジェットを指定する。

アイコンあり(テキストフォーム外、非選択状態)

アイコンあり(テキストフォーム外、選択状態)

アイコンあり(テキストフォーム内)

テキストフォーム内にアイコンを表示する場合、prefixIconプロパティにIcon()ウィジェットを指定する。

アイコンあり(テキストフォーム内、非選択状態)

アイコンあり(テキストフォーム内、選択状態)

複数行入力

デフォルトではTextFormFieldには1行しか入力ができない。 しかしmaxLinesを1より大きくすることで複数行入力が可能になる。

この時にkeyboardType: TextInputType.multilineを併せて設定することで、キーボードのEnterで改行することができる。

複数行入力

下記のコードでは入力可能な範囲を見やすくするために枠線をつけている。