[Flutter]TextFieldの変更を検知するための「onChanged方式」と「addListener方式」は何が違うのか

Flutterでの文字入力欄のWidgetであるTextFieldにおいて、入力欄に入力された文字の変更を検知する方法として、

1)TextFieldの「onChanged」属性を使うやり方(onChanged方式)

2)TextEditingController.addListenerメソッドを使うやり方(addListener方式)

の2通りがあり、実装的には

1)の「onChange方式」はたったこれだけで済むのに対し、

TextField(
  onChanged: (text) {
    print('First text field: $text');
  },
),

2)の「addListener方式」は、リスナーの設定が必要なのでやや複雑です(以下のコードはスニペットですのでこのままでは動きません)。

@override
void initState() {
  super.initState();

  // Start listening to changes.
  myController.addListener(_printLatestValue);
}

@override
void dispose() {
  // Clean up the controller when the widget is removed from the widget tree.
  // This also removes the _printLatestValue listener.
  myController.dispose();
  super.dispose();
}

void _printLatestValue() {
  print('Second text field: ${myController.text}');
}

//buildメソッド内で
TextField(
  controller: myController,
),

これだけを見ると、実装が簡単な1)の「onChanged」方式でええやんけ!と思うかもしれませんが、実は両者には明確な違いがあります。

  • 1)の「onChanged方式」は、ユーザーがデバイス上でTextFieldの値を変更した場合のみ発動される一方、
  • 2)の「addListener方式」の場合は、TextFieldの値が動的に(programmatically)変更された場合でも発動される(より発動基準が包括的)ようです。

【参考】onChanged属性(Flutter公式)

https://api.flutter.dev/flutter/material/TextField/onChanged.html

This callback doesn’t run when the TextField’s text is changed programmatically, via the TextField’s controller. Typically it isn’t necessary to be notified of such changes, since they’re initiated by the app itself.

To be notified of all changes to the TextField’s text, cursor, and selection, one can add a listener to its controller with TextEditingController.addListener.

ですので、TextFieldの値をプログラムで動的に変更したい場合は、「onChanged方式」は使えないので、「addListener方式」での実装が必要となります。

(詳しくは、以下の動画で解説していますので、よろしければご覧下さい)

こんな記事も読まれています

おすすめコンテンツ




Flutter(フラッター)


みんプロ作成アプリ




TOP