FlutterのTextFieldに背景色を設定する方法-スケ郎のお話

FlutterのTextFieldはユーザーからの入力を受け取るウィジェットです。この記事では、簡単なステップでTextFieldに背景色を設定する方法を紹介します。

背景色の設定

FlutterのTextFieldウィジェットで背景色を設定するには、decorationプロパティ内のInputDecorationを使用します。具体的には、fillColorプロパティに色を指定し、filledプロパティをtrueに設定します。

以下のサンプルコードを見てみましょう：

TextField(
  decoration: const InputDecoration(
    fillColor: Colors.white,  // 背景色を白に設定
    filled: true,  // 背景色を有効にする
  ),
),

このコードでは、TextFieldの背景色を白(Colors.white)に設定しています。fillColorにはMaterialColorを指定することができ、Flutterには多くの組み込み色が用意されています。

背景色はアプリのテーマやデザインに合わせて自由にカスタマイズ可能です。例えば、以下のように異なる色を設定可能です。（入力欄が青色なんて気持ち悪いかもですが…w）

TextField(
  decoration: InputDecoration(
    fillColor: Colors.lightBlue[100],  // 淡い青色
    filled: true,
  ),
),

この例では、Colors.lightBlue[100]を使って、より明るい青色の背景を設定しています。色の強度はブラケット内の数値で調節できます。

TextFieldのdecorationプロパティを使うことで、背景色を簡単に設定することができます。