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

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

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

方法

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

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

そして、両方のOutlineInputBorderの引数「borderSide」にBorderSideを指定し、BorderSideの引数「color」に枠線の色を指定します。

TextFormField(
  decoration: InputDecoration(
    enabledBorder: OutlineInputBorder(
      borderSide: BorderSide(
        color: /*枠線の色*/,
      ),
    ),
    focusedBorder: OutlineInputBorder(
      borderSide: BorderSide(
        color: /*枠線の色*/,
      ),
    ),
  ),
),

InputDecorationの引数「enabledBorder」と引数「focusedBorder」を使えば、枠線の色を設定することが出来ます。

使用例

以下は、使用例です。

TextFormField(
  decoration: InputDecoration(
    enabledBorder: OutlineInputBorder(
      borderSide: BorderSide(
        color: Colors.pink,
      ),
    ),
    focusedBorder: OutlineInputBorder(
      borderSide: BorderSide(
        color: Colors.pink,
      ),
    ),
  ),
),

[Flutter]TextFormFieldの左側にアイコンを表示するには？

TextFormFieldの左側にアイコンを表示する方法を紹介します。

www.choge-blog.com

2021.11.09

[Flutter]TextFormFieldの右側にアイコンを表示するには？

TextFormFieldの右側にアイコンを表示する方法を紹介します。

www.choge-blog.com

2021.11.06

[Flutter]DatePickerでTextFormFieldに入力するには？

DatePickerでTextFormFieldに入力するには、どうしたらいいのでしょうか？

www.choge-blog.com

2021.10.08

[Flutter]TextFormFieldウェジェッに初期値を設定する方法

TextFormFieldウェジェットに「初期値」を設定する方法を紹介します。

www.choge-blog.com

2021.09.27