【Flutter/Dart】テキストフィールドフォームで入力データを表示

Flutterでテキストフィールドフォームで入力データを表示する方法を整理しました。

【はじめに】テキストフィールドに入力したデータを画面に表示

以下実行例のように、Flutterでテキストフィールドに入力したデータを画面に表示していくアプリを作っていきます。

実行例

TextEditingControllerでテキストフィールドの入力内容を管理(内容を取得したりなど)できます。

【サンプルコード】Flutter + Dart

Flutter + Dartで実装したサンプルコードは以下の通りです。

■lib/main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'サンプルアプリ',
      theme: new ThemeData.dark(),
      home: InputDataForm(),
    );
  }
}

class InputDataForm extends StatefulWidget {
  @override
  _InputDataFormState createState() => _InputDataFormState();
}

class _InputDataFormState extends State {
  // テキストフィールドを管理するコントローラを作成(入力内容の取得用)
  final textController = TextEditingController();

  // 入力データ格納用のリスト
  List> items = [];

  // ID(カウンタ変数)
  int _counter = 0;

  // 追加ボタンが押されたときの処理(リストにIDと入力データを新規追加)
  void _addItem(String inputText) {
    setState(() {
      _counter++;
      items.add({ "id": _counter, "content": inputText});
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('データ入力・表示'),
      ),
      body: Container (
        child: Column(
            children: [
              Padding(
                padding: const EdgeInsets.all(16.0),
                child: TextField(
                  controller: textController,
                ),
              ),
              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: () {
          //テキストフィールドの内容を取得し、アイテムリストに追加
          _addItem(textController.text);

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

テキストフィールドに入力された内容を、追加ボタンを押すごとにリスト(items)へ追加します。
そしてリアクティブに画面内容(ListView)が更新されます。

関連記事
1 【Flutter入門】iOS、Android、Windowsアプリ開発
関連記事