【お知らせ】みんプロ式Flutter講座は2026年4月末をもって新規販売を終了いたしました。詳しくはこちら →

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

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

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

GAMBO(願望) 願望実現・目標達成の
17秒 / 68秒ワーク
GAMBO(願望) 引き寄せ難民だったぼくの挫折経験から生まれた誰でもできる願望実現サポートアプリ。かの有名な17秒/68秒ワークを独自の視覚化メソッドで簡単実践。
App Store / Google Play 詳しく見る →
Meiso(瞑想) 鐘音と自然音で
5分からのマインドフルネス
Meiso(瞑想) 初心者でも“迷わず続けられる”ことにこだわった、完全無料の瞑想アプリ。画面のガイドに従うだけで呼吸のリズムが整い、最短5分から瞑想を実践できます。
App Store / Google Play 詳しく見る →
小学生からの英検®単語 A ふりがな・音声付き
英検単語1日5分トレーニング
小学生からの英検®単語 ありそうでなかった!ふりがな付き英検®単語トレーニングアプリ!1日たった5分!スキマ時間を活用して、英検®頻出単語を効率的に習得。お子様の一人学習にも安心設計。
App Store / Google Play 詳しく見る →
オボエルンジャー レトロゲームで
nバック脳トレ
オボエルンジャー 科学的脳力開発法「Nバック課題」をファミコン風8bitレトロゲームにアレンジした新感覚脳トレアプリ。記憶力・感情コントロール力・集中力の向上に。
App Store / Google Play 詳しく見る →
ゴイコイコイ 超高速フラッシュカードで
語彙習得
ゴイコイコイ 日常語1400語を視覚的に学べる、高速読み上げフラッシュカード式の語彙トレーニングアプリ。知育教室で行われるフラッシュカード学習を、家庭で“手軽に・安価に・正確に”再現。
App Store / Google Play 詳しく見る →

TOP