[Flutter]TextFieldの左側にアイコンを表示するには？

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

TextFieldの左側にアイコンを表示する方法を紹介します。

方法

TextFieldの左側にアイコンを表示するには、InputDecorationの引数「prefixIcon」を使います。

まず、TextFieldの引数「decoration」に「InputDecoration」を指定します。

そして、InputDecorationの引数「prefixIcon」に左側に表示したいアイコンを指定します。

TextField(
  decoration: InputDecoration(
    prefixIcon: Icon(/*アイコン*/),
  ),
)

これでTextFieldの左側にアイコンを表示することが出来ます。

以下は、使用例です。

使用例

TextField(
  decoration: InputDecoration(
    prefixIcon: Icon(Icons.person),
    border: OutlineInputBorder(),
  ),
)