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

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

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

方法

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

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

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

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

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

以下は、使用例です。

使用例

TextFormField(
  decoration: InputDecoration(
    suffixIcon: Icon(Icons.clear_rounded),
    border: OutlineInputBorder(),
  ),
),