[Flutter]「TextField」に枠線を付ける方法

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

文字入力欄を作る「TextFieldウェジェット」に枠線を付ける方法を解説します。

方法

TextFieldウェジェットに枠線を付けるには、「InputDecoration」の「border引数」を使います。

TextField(
      decoration: InputDecoration(
             border: OutlineInputBorder(),
      ),
)

「InputDecoration」の「border引数」に、「OutlineInputBorder」を指定します。

そうすることで、TextFieldに枠線を付けることが出来ます。

OutlineInputBorderは、枠線の色や幅、角の丸みなどの設定を持っています。

もし、枠線の細かい設定をしたいなら、引数で指定して下さい。

まとめ

TextFieldに枠線を付けるには、「InputDecoration」の「border引数」に、「OutlineInputBorder」を指定します。

また、枠線の細かい設定を行う場合は、「OutlineInputBorder」の引数を使います。

You.com | AI for workplace productivity

Leverage a personal AI search agent & customized recommendations with You.com's AI chatbot. Converse naturally and disco...

you.com

OutlineInputBorder class - material library - Dart API

API docs for the OutlineInputBorder class from the material library, for the Dart programming language.

api.flutter.dev