Flutter TextFormFieldの下線の色を設定するサンプル

2023年9月23日

環境
Windows11 pro 64bit
Flutter 3.3.7

構文
1.通常時の下線の色を設定する

enabledBorder: UnderlineInputBorder(
  borderSide: BorderSide(
    color: xxx
  ),
),

2.入力中の下線の色を設定する

focusedBorder: UnderlineInputBorder(
  borderSide: BorderSide(
    color: xxx,
  ),
),

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

使用例

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

説明
InputDecorationの引数「focusedBorder」と引数「enabledBorder」にUnderlineInputBorderを指定します。
両方のUnderlineInputBorderの引数「borderSide」にBoderSideを指定します。