[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方式」での実装が必要となります。

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

blank

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

今すぐプレゼントを受け取る(約6時間のFlutter初級編体験版動画講座を無料でプレゼント)

はじめての方へ

blank
みんプロ式プログラミング講座体系・ラインナップ
みんプロ式プログラミング講座受講の流れ(割引特典利用方法)
サイトマップ(みんプロHPコンテンツ一覧)
運営会社概要

おすすめコンテンツ

プログラミングを学ぶとどんないいことがあるのか
みんプロ式を選んでいただける6つの理由
ぼくの人生挫折ヒストリー(代表者プロフィール)
ぼくのプログラミング挫折ヒストリー(無料メール講座・6大特典付き)
今最も注目のアプリ開発ツール「Flutter(フラッター)」ミニ動画講座

みんプロ式動画講座(コア・Flutter)

ゼロからのFlutter(初級編)-はじめてのプログラミングからアプリリリースまで-
Flutter中級編1-Web通信・設計・状態管理・DIの基礎-
Flutter中級編2-Firebase/地図・カメラ連携等の基礎-
Flutter中級編3-広告/アプリ内課金等の基礎-
Flutter中級編4-Webアプリとレスポンシブデザインの基礎-

みんプロ式動画講座(サテライト)

Flutter/Dartトラブルシューティング・小ネタ集(コア初級編受講で無料プレゼント)
ゼロからのGit・GitHub(コマンドラインツールを極力使わないバージョン管理入門)
Flutter/Dartにおける設計・状態管理・DIの解説集
blank

みんプロ式対面講座(Zoom)

反転授業型3ヶ月集中グループコース(対面講座)
アプリ作成サポート型マンツーマンコース(対面講座)

みんプロ作成アプリ

blank
blank
blank
blank

TOP