[Flutter] TextFieldウェジェットの背景色を設定する方法

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

TextFieldウェジェットの背景色を設定する方法を解説します。

方法

TextFieldに背景色を設定するには、「fillColor引数」と「filled引数」を使います。

この２つの引数は、「InputDecoration」が持っている引数で、次のような設定が出来ます。

• fillColor : 背景色の設定
• filled : 背景色を使うかどうかの設定

使用例

TextField(
      decoration: InputDecoration(
              fillColor: Colors.green,
              filled: true,
              border: OutlineInputBorder(),
       ),
)

「fillColor引数」で背景色、その背景色を表示するために「filled引数」に「true」を指定します。

ポイントしては、「filled引数」に「true」を渡す点です。

「filled引数」に「true」を渡さなければ、背景色は変化しません。

まとめ

TextFieldウェジェットに背景色を設定するには、「InputDecoration」の次の２つの引数を使います。

• fillColor : 背景色の設定
• filled : 「true」を指定することで、背景色が表示される