タグ: TextEditingController

投稿日:

2020/10/18 Flutter : Retrieve the value of a text fieldの訳

このページでは、ユーザーがテキストフィールドに入力したテキストを取得する方法を次のステップに沿って学びます。

  1. TextEditingControllerインスタンスを生成する。
  2. TextFieldウィジェットにTextEditingControllerインスタンスを設定する。(「設定する」とはTextFieldクラスのコンストラクタのパラメータにTextEditingControllerインスタンスを渡すことです。)
  3. テキストフィールドの現在値を表示する。

1.TextEditingControllerインスタンスを生成する。

ユーザーがテキストフィールドに入力したテキストを取得するために、TextEditingControllerインスタンスを生成し、TextFieldウィジェット・あるいはTextFormFieldウィジェットのプロパティに設定します(渡します)。

important:TextEditingControllerを使用し終えたら、disposeメソッドを呼び出しましょう。これによりもう使用しないオブジェクトがリソースを占有し続ける状況を避けることができます。

// カスタムのフォームウィジェット「MyCustomForm」クラスを宣言します。
class MyCustomForm extends StatefulWidget {
  @override
  _MyCustomFormState createState() => _MyCustomFormState();
}

// 対応するStateクラスを定義する。
// このクラスがフォームのデータを保持する。
class _MyCustomFormState extends State<MyCustomForm> {
  // ↓text controllerを生成する。
  //後にこのコントローラーを使用してテキストフィールドの現在の値を取得する。
  final myController = TextEditingController();

  @override
  void dispose()
…
投稿日:

2020/10/18 Flutter : Handle changes to a text fieldの訳

ページの一番下にこのページで説明していることの全てを含む完全なサンプルコードがありますので、そちらを最初に見た方が良いかもしれません。

テキストフィールドに入力されたテキストが変更されるたびに特定のコールバックを呼び出したい、という場面はよくあります。たとえば、ユーザーの入力に応じて結果を更新するオートコンプリート機能を備えた検索画面を作成したい場合があります。

このような機能を実装する場合Flutterでは以下の二つの選択肢があります。

  1. TextFieldウィジェット、あるいはTextFormFieldウィジェットのonChanged()コールバックを設定する。
  2. TextEditingControllerウィジェットを使用する。

1.TextFieldウィジェット、あるいはTextFormFieldウィジェットのonChanged()コールバックを設定する。

最もシンプルな選択肢はTextFieldウィジェット・TextFormFieldウィジェットのonChangedプロパティにコールバックを設定する方法です。テキストが変更する度にコールバックが呼び出されます。

以下のサンプルはテキストが変更する度にコンソールに現在の入力文字列が表示される例です。

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

2.TextEditingControllerを使用する。

よりパワフルな選択肢として、TextFieldウィジェット・TextFormFieldウィジェットのcontrollerプロパティにTextEditingControllerクラスのインスタンスを設定する方法があります。

テキストが変更した時にその旨の通知を受けるには、次のステップに沿ってaddlistener()メソッドを使ってコントローラーをリッスンします。

  1. TextEditingControllerを生成する。
  2. TextEditingControllerをテキストフィールドに接続する。
  3. 現在の文字列値を表示する関数を宣言する。
  4. 変更を察知するためにコントローラーをリッスンする。

Step1.TextEditingControllerを生成する。

// ↓カスタムのフォームウィジェット「MyCustomForm」を定義する。

class MyCustomForm extends StatefulWidget {
  @override
  _MyCustomFormState createState() => _MyCustomFormState();
}

//
…