Flutterで入力フォームを作成するには、TextFormFieldが必要になります。
その中のdecorationに、InputDecorationを付与させることで、入力フォームを様々なスタイルにカスタマイズすることが可能になります。
今回は、入力フォームの色（縁の中）を変更していきます。
入力フォームの色を変更する
まずは、基礎となる入力フォームを作成していきます。
入力フォームを作成する
以下のコードで、縁を囲った入力フォームができます。
...
Expanded(
child: TextFormField(
decoration: InputDecoration(
enabledBorder: const OutlineInputBorder(
borderSide: BorderSide(
color: Color(0xff000000),
width: 2,
),
borderRadius: BorderRadius.all(Radius.circular(15)),
),
focusedBorder: const OutlineInputBorder(
borderSide: BorderSide(
color: Color(0xff000000),
width: 2,
),
borderRadius: BorderRadius.all(Radius.circular(15)),
),
hintText: 'メッセージをおくる',
),
...
上記コードでは、キーボードが表示されている時と、キーボードが表示されている時のスタイルを付与しております。
入力フォームに色を付与する
以下のコードで、実際に入力フォームに色を付与しております。
...
Expanded(
child: TextFormField(
decoration: InputDecoration(
filled: true,
fillColor: const Color(0xff005dff),
enabledBorder: const OutlineInputBorder(
borderSide: BorderSide(
color: Color(0xff000000),
width: 2,
),
borderRadius: BorderRadius.all(Radius.circular(15)),
),
focusedBorder: const OutlineInputBorder(
borderSide: BorderSide(
color: Color(0xff000000),
width: 2,
),
borderRadius: BorderRadius.all(Radius.circular(15)),
),
hintText: 'メッセージをおくる',
),
...
filledをtrueに設定してから、fillColorに色を設定していくことで、入力フォームに色を付与させることができます。
これで、入力フォームの色を変更できるようになりました。
アプリケーションのデザインに合わせた入力フォームのカスタマイズが可能になることでしょう。