🚶
【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,
),
),
),
),
Discussion