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

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

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

方法

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

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

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

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

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

以下は、使用例です。

使用例

TextFormField(
  decoration: InputDecoration(
    prefixIcon: Icon(Icons.mail),
    border: OutlineInputBorder(),
  ),
),