本エントリではパターン別にTextFormFieldのデザイン設定を説明する。
TextFormFieldとは
TextFormFieldはユーザーに文字列を入力してもらうためのテキストフォーム作成用ウィジェット。
TextFieldを拡張しているクラスなので、TextFieldで使用できるプロパティは全て使用できる。
TextFormFieldのデザインを設定する場合はdecorationプロパティにInputDecorationを指定することで行う。
パターン別デザイン
デフォルト
デフォルトのデザインは以下の通り。そのままだと見にくいのでPaddingでラップしている。
ヒント文字あり
ヒント文字はTextFormFieldを非選択状態でフォーム内に表示されている文字。
選択状態になり文字が入力されると非表示になる。
枠線あり
枠線はborderプロパティにOutlineInputBorder()を指定することで設定する。
背景色あり
背景色はfillColorプロパティに色を指定し、filledをtrueに設定する。
選択時の枠線の色
focusedBorderにOutlineInputBorderを設定すると、テキストフォームを選択した際の枠線の色を設定できる。
OutlineInputBorderのborderSideにBorderSide()を指定することで色を設定する。
ラベルテキストあり
ラベルテキストはテキストフォームを選択していない状態だとヒントテキストのような表示になる。 テキストフォームを選択すると枠上部にサイズが小さくなって表示され続ける。
labelTextプロパティに表示したい文字列を指定すればよい。
アイコンあり（テキストフォーム外）
テキストフォームの横にアイコンを表示する場合、iconプロパティにIcon()ウィジェットを指定する。
アイコンあり（テキストフォーム内）
テキストフォーム内にアイコンを表示する場合、prefixIconプロパティにIcon()ウィジェットを指定する。
複数行入力
デフォルトではTextFormFieldには1行しか入力ができない。
しかしmaxLinesを1より大きくすることで複数行入力が可能になる。
この時にkeyboardType: TextInputType.multilineを併せて設定することで、キーボードのEnterで改行することができる。
下記のコードでは入力可能な範囲を見やすくするために枠線をつけている。
