Flutterでテキストフィールドフォームの入力内容を画面に表示する手順

公開日：2019/05/18 更新日：2019/05/18

Flutter

Photo by NeONBRAND on Unsplash

はじめに

Flutterでテキストフィールドの内容を取得して画面に表示するまでの手順を説明します。

できるようになること

以下のGIF画像のように、テキストフィールドに入力して追加ボタンを押すと、入力した内容をリストに追加していきます。TextEditingControllerを使うことでテキストフィールドの入力内容を管理することができます。

このデモのコードは以下のGitHubにあげてあります。

github.com

virment/flutter-sample

TextField sample

前提と環境

以下の通りです。

Flutter 1.5.4-hotfix.2
Dart 2.3.0

TextEditingControllerについて

テキストフィールドの入力内容を管理するためにTextEditingControllerを使用します。別途パッケージをインストールする必要はなくデフォルトで使用可能です。

以下にTextEditingControllerの使い方、例についての公式ドキュメントがあります。こちらを参考にしています。

flutter.dev

Retrieve the value of a text field

In this recipe, we'll see how to retrieve the text a user has typed into a textfield.## Directions 1. Create a `TextEditingController` 2. Supply the `TextEditingController` to a `TextField` 3. Display the current value of the text field## 1. Create a `TextEditingController`In order to retrieve the text a user has...

TextEditingControllerの使い方

TextEditingControllerのコントローラを作成し、後は入力した内容をmyController.textというような形で取り出すことができます。myControllerは適当に名前をつけたTextEditingControllerのコントローラです。冒頭に載せたデモのコードを以下に載せます。なお、全体のコードはGitHubに載せています。各説明は以下のコード内のコメントに含めます。なお、全体のコードは冒頭に載せたGitHub上に載せています。

main.dart

class _MyCustomFormState extends State {
  // テキストフィールドを管理するコントローラを作成
  // 入力された内容をこのコントローラを使用して取り出します。
  final myController = TextEditingController();

  // 適当なリスト用データ
  List> items = [
    { "id" : 1,  "content" : "Content 1" },
    { "id" : 2,  "content" : "Content 2" },
    { "id" : 3,  "content" : "Content 3" }
  ];

  //　上記リスト用IDカウンター
  int _counter = 3;

  //　追加ボタンが押されたときに実行する関数
  void _addItem(String inputtext) {
    setState(() {
      _counter++;
      items.add({ "id": _counter, "content": inputtext});
    });
  }

  @override
  // widgetの破棄時にコントローラも破棄する
  void dispose() {
    myController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Text Input Sample'),
      ),
      body: Container (
         child: Column(
          // mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Padding(
              padding: const EdgeInsets.all(16.0),
              child: TextField(
                controller: myController,
              ),
            ),
            Expanded(
              child:ListView.builder(
              scrollDirection: Axis.vertical,
              shrinkWrap: true,
              itemCount: items.length,
              itemBuilder: (BuildContext context, int index) {
              final item = items[index];
            
              return new Card(
                child: ListTile(
                  leading: FlutterLogo(),
                  title: Text(item["id"].toString() + " : " + item["content"]),
                ),
              );
            }),
            ),
          ]),
        ),
        // テキストフィールド送信用ボタン
        floatingActionButton: FloatingActionButton(
        // onPressedでボタンが押された時の動作を渡す
        onPressed: () {
          // myController.text で入力されたテキストフィールドの内容を取得
          // 以下の_addItemは自分で定義済の関数
          _addItem(myController.text);

          // テキストフィールドの内容をクリアする
          myController.clear();
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

上記のコードでは、テキストフィールドに入力された内容を、追加ボタンによってitemsに追加しています。そしてそれとリアクティブに画面内容のListViewも更新されます。