[Flutter]TextFormFieldの下線の色を設定するには？

どうも、ちょげ(@chogetarou)です。

TextFormFieldの下線の色を設定する方法を紹介します。

方法

TextFormFieldの下線の色を設定するには、InputDecorationの引数「focusedBoder」と引数「enabledBorder」を使います。

まず、InputDecorationの引数「focusedBorder」と引数「enabledBorder」にUnderlineInputBorderを指定します。

次に、両方のUnderlineInputBorderの引数「borderSide」にBoderSideを指定します。

そして、引数「focusedBorder」のBorderSideの引数「color」に入力中の下線の色、引数「enabledBorder」のBorderSideの引数「color」に通常時の下線の色を指定します。

TextFormField(
  decoration: InputDecoration(
    enabledBorder: UnderlineInputBorder(
      borderSide: BorderSide(
        color: /*通常時の下線の色*/,
      ),
    ),
    focusedBorder: UnderlineInputBorder(
      borderSide: BorderSide(
        color: /*入力中の下線の色*/,
      ),
    ),
  ),
),

これでTextFormFieldの基本的な下線の色を設定することが出来ます。

使用例

以下は、使用例です。

TextFormField(
  decoration: InputDecoration(
    enabledBorder: UnderlineInputBorder(
      borderSide: BorderSide(
        color: Colors.blue, //通常時
      ),
    ),
    focusedBorder: UnderlineInputBorder(
      borderSide: BorderSide(
        color: Colors.pink, //入力中
      ),
    ),
  ),
),

[Flutter]TextFormFieldのバリデーションエラーテキストの色を設定するには？

TextFormFieldがバリデーションエラーを起こした時に表示されるテキストの色を設定する方法を紹介します。

www.choge-blog.com

2021.12.04

[Flutter]TextFormFieldに枠線を付けるには？

TextFromFieldに枠線を付ける方法を紹介します。

www.choge-blog.com

2021.12.04

[Flutter]TextFormFieldを数字だけの入力にするには？

TextFormFieldを数字だけの入力にする方法を紹介します。

www.choge-blog.com

2021.12.05

[Flutter]TextFormFieldの枠線を削除して無くすには？

TextFormFieldの枠線を無くす方法を紹介します。

www.choge-blog.com

2021.12.05