[Flutter]CupertinoTextFieldにクリアボタン(clear button)を追加する(add)には？

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

CupertinoTextFieldにクリアボタンを追加する方法を紹介します。

方法

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

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

final _editingController = TextEditingController();

~~~~~~

CupertinoTextField(
<strong><span class="marker">  controller: _editingController,</span></strong>
),</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>そして、ボタンを任意の場所に配置し、ボタンの処理でTextEditingControllerのclearメソッドを呼び出します。</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>CupertinoButton(
  child: Text('Button'),
  onPressed: () {
    <strong><span class="marker">_editingController.clear();</span></strong>
  },
),</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>TextEditingControllerのclearメソッドを使えば、CupertinoTextFieldにクリアボタンを追加することが出来ます。</p>
<!-- /wp:paragraph -->

<!-- wp:block {"ref":5802} /-->

<!-- wp:heading -->
<h2>使用例</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>以下は、使用例です。</p>
<!-- /wp:paragraph -->

<!-- wp:video {"autoplay":true,"id":11416,"loop":true,"muted":true,"src":"https://www.choge-blog.com/wp-content/uploads/2021/12/画面収録-2021-12-08-7.56.03.mov"} -->
<figure class="wp-block-video"><video autoplay controls loop muted src="https://www.choge-blog.com/wp-content/uploads/2021/12/画面収録-2021-12-08-7.56.03.mov" playsinline></video></figure>
<!-- /wp:video -->

<!-- wp:code -->
<pre class="wp-block-code"><code>final _editingController = TextEditingController();

~~~~~~~

CupertinoTextField(
  controller: _editingController,
  suffix: IconButton(
    onPressed: () {
      _editingController.clear();
    },
    icon: Icon(CupertinoIcons.clear),
  ),
),