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

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

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

方法

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

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

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

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

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

以下は、使用例です。

使用例

TextField(
  decoration: InputDecoration(
    suffixIcon: Icon(
      Icons.check,
      color: Colors.green,
    ),
    border: OutlineInputBorder(),
  ),
)