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

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

(注)以下のフォームより当社公式メールマガジンにご登録頂くことで
約6時間のFlutter動画講座が無料で受講できます!

(メールマガジンは登録無料・いつでも解除可)

[体験版]
ゼロからのFlutter
(Flutter初級編) 

 

【体験版講座に含まれるもの】
・約70本・約6時間の動画テキスト
・1つの課題アプリのソースコード
・Flutterアプリを作るための「環境構築ライブサポート(Google Meet)」
(「体験版」は全30時間超の「製品版」の約1/6を抜粋した講座です。「製品版」の詳細はこちらから)

 

【当社公式メルマガご登録6大特典】
blank

\約6時間動画講座を無料プレゼント!/
今すぐ無料体験版に申し込む ▶
無料メルマガ登録で講座割引クーポンなど6大特典ゲット!

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

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

はじめての方へ

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

みんプロ作成アプリ

blank
blank
blank
blank
blank

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

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

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

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

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