[Flutter]テキストフィールドにクリア（リセット）ボタンを追加する方法

Flutter

2021.10.15

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

テキストフィールドに、入力したテキストをリセットするボタンを追加する方法を紹介します。

方法
まとめ

方法

テキストをリセットするボタンを追加するには、まず、TextEditinControllerの変数を用意します。

var _controller = TextEditingController();

次に、テキストフィールドの引数「controller」に、この変数を指定します。

ボタンを追加し、タップした時の処理で「clear」メソッドを指定します。

また、「InputDecorationクラス」の引数「suffixIcon」に「IconButton」を指定すると、クリアボタンっぽくなります。

             TextField(
                controller: _controller, //コントローラの設定
                decoration: InputDecoration(
                  suffixIcon: IconButton(
                    onPressed: () => _controller.clear(), //リセット処理
                    icon: Icon(Icons.clear),
                  ),
                ),
              )