[Flutter]TextFormFieldの右側にクリアボタンを追加するには？

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

TextFormFieldの右側にクリアボタンを追加する方法を紹介します。

方法

TextFormFieldにクリアボタンを追加するには、TextEditingControllerとInputDeocorationを使います。

まず、TextEditingControllerの変数を用意し、TextFormFieldの引数「controller」に変数を指定します。

final _editingController = TextEditingController();

~~~省略~~~

TextFormField(
  controller: _editingController,
),

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

そして、InputDecorationの引数「suffixIcon」にIconButtonを指定します。

IconButtonの引数「icon」にクリアアイコン、引数「onPressed」に関数を指定します。

関数の処理では、TextEditingControllerのclearメソッドを呼び出します。

TextFormField(
  controller: _editingController,
  decoration: InputDecoration(
    suffixIcon: IconButton(
      onPressed: () {
        _editingController.clear();
      },
      icon: Icon(Icons.clear),
    ),
  ),
),

clearメソッドが呼び出されると、TextFormFieldのテキストがクリアされます。

TextEditingControllerとInputDecorationを使えば、TextFormFieldの右側にクリアボタンを追加することが出来ます。

[Flutter]TextFormFieldにプレースホルダーを表示するには？

TextFormFieldにプレースホルダーを表示する方法を紹介します。

www.choge-blog.com

2021.12.06

[Flutter]TextFormFieldのテキストを上に寄せる方法

TextFormFieldのテキストを上に寄せる方法を紹介します。

www.choge-blog.com

2021.12.06

[Flutter]TextFormFieldのテキストを縦方向で真ん中に寄せるには？

TextFormFieldのテキストを縦方向で中央に寄せる方法を紹介します。

www.choge-blog.com

2021.12.06

[Flutter]TextFormFieldのプレースホルダーのテキストサイズを設定するには？

TextFormFieldで表示するプレスホルダーのテキストの大きさを設定する方法を紹介します。

www.choge-blog.com

2021.12.06