Flutter TextFormFieldのテキスト入力中の枠線の色を設定するサンプル

2023年10月5日

環境
Windows11 pro 64bit
Flutter 3.3.7

構文

focusedBorder: OutlineInputBorder(
    borderSide: BorderSide(
        color: 入力中の枠線の色,
      ),
 ),

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

作成方法
1. InputDecorationの引数「focusedBorder」にOutlineInputBorderを指定する

decoration: InputDecoration(
  focusedBorder: OutlineInputBorder(xx

2.OutlineInputBorderの引数「borderSide」にBorderSideを指定する

borderSide: BorderSide(xx

3.BorderSideの引数「color」に入力中の枠線の色を指定する

color:xxx

使用例

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