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() {
    // このウィジェットがウィジェットツリーから除去された時にコントローラーをクリーンアップする。
    myController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    //次のステップでこの部分を実装する。
  }
}

2.TextFieldウィジェットにTextEditingControllerインスタンスを設定する。

TextEditingControllerインスタンスを生成しましたので、TextFieldウィジェットのcontrollerプロパティに渡して、TextEditingControllerとTextFieldを接続します。

TextField(
  controller: myController,
);

3.テキストフィールドの現在値を表示する。

TextFieldウィジェットにTextEditingControllerインスタンスを設定したら、テキストフィールドの現在値を読み取れるようになります。TextEditingControllerのゲッターtextを使って、ユーザーがテキストフィールドに入力した文字列の現在値を取得します。

下記のサンプルは、ユーザーがフローティングアクションボタン(右下の丸いボタン)をタップしたら、アラートダイアログで「テキストフィールドの現在値」を表示するサンプルです。

FloatingActionButton(
  // ユーザーがボタンを押したら、アラートダイアログにより
  // 「テキストフィールドに入力されている現在値」が表示されます。
  onPressed: () {
    return showDialog(
      context: context,
      builder: (context) {
        return AlertDialog(
          // ↓TextEditingControllerを使って、ユーザーの入力値を取得します。
          content: Text(myController.text),
        );
      },
    );
  },
  tooltip: 'Show me the value!',
  child: Icon(Icons.text_fields),
);

まとめのサンプル

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Retrieve Text Input',
      home: MyCustomForm(),
    );
  }
}

// Define a custom Form widget.
class MyCustomForm extends StatefulWidget {
  @override
  _MyCustomFormState createState() => _MyCustomFormState();
}

// Define a corresponding State class.
// This class holds the data related to the Form.
class _MyCustomFormState extends State<MyCustomForm> {
  // Create a text controller and use it to retrieve the current value
  // of the TextField.
  final myController = TextEditingController();

  @override
  void dispose() {
    // Clean up the controller when the widget is disposed.
    myController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Retrieve Text Input'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: TextField(
          controller: myController,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        // When the user presses the button, show an alert dialog containing
        // the text that the user has entered into the text field.
        onPressed: () {
          return showDialog(
            context: context,
            builder: (context) {
              return AlertDialog(
                // Retrieve the text the that user has entered by using the
                // TextEditingController.
                content: Text(myController.text),
              );
            },
          );
        },
        tooltip: 'Show me the value!',
        child: Icon(Icons.text_fields),
      ),
    );
  }
}

参考

https://flutter.dev/docs/cookbook/forms/retrieve-input