[Flutter]テキストフィールド内にアイコンボタンを表示する方法

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

テキストフィールド(TextField)内にアイコンボタン(IconButton)を表示する方法を紹介します。

方法

テキストフィールド内にアイコンボタンを表示するには、TextFieldの引数「decoration」を使います。

decorationに指定する「InputDecorationクラス」の引数「prefixIcon」と引数「suffixIcon」にIconButtonを設定することで、アイコンボタンを表示することが出来ます。

              child: TextField(
                decoration: InputDecoration(
                  prefixIcon: IconButton(
                    onPressed: () {},
                    icon: Icon(Icons.search),
                  ),
                  suffixIcon: IconButton(
                    onPressed: () {},
                    icon: Icon(Icons.clear),
                  ),
                ),
              )

まとめ

TextFieldの引数「decoration」に指定する「InputDecorationクラス」を指定します。

そして、InputDecorationの「suffixIcon」と「prefixIcon」にIconButtonを指定することで、テキストフィールド内にアイコンボタンを表示することが出来ます。