【Flutter】InputDecorationとOutlineInputBorderで作ったTextFieldの枠線の色を変更する

概要

FlutterでTextFieldに画像のような枠線を作りたいときは、InputDecorationとOutlineInputBorderを使用することで表現できます。

OutlineInputBorderで表示する枠線の色を変更するには、どのプロパティを設定すれば良いかを紹介します。

※ Flutter:3.3.10で動作確認しています。

枠線の色を設定する

OutlineInputBorderで表現した枠線の色を変更するには、InputDecorationのenabledBorderプロパティを使用します。
そして、OutlineInputBorderのborderSideでBorderSideを指定し、colorプロパティを設定すれば、枠線の色を変更できます。

  TextField(
    decoration: InputDecoration(
      enabledBorder: OutlineInputBorder(
	borderRadius: BorderRadius.circular(30.0),
	borderSide: BorderSide(
	  color: Colors.deepOrangeAccent,
	),
      ),
    ),
  ),