Flutter,テキストボックス入力値を画面上に即時反映する

2019年3月23日カテゴリー：モバイルアプリ開発, 技術系コメント : 0

１，はじめに

最近Flutterで何ができるのかの動作確認をしている。

今回、Flutterでテキストボックスを表示する方法と、その入力値を取得する方法についての確認を行った。

作成したサンプルのコード等を基に、備忘録を残す。

２，各フェーズについて

（１）テキストボックスの設置

画面にテキストボックスを設置する。

この際、テキストボックス名や入力値がない場合に表示されるテキストもセットする。

TextField(
  decoration: InputDecoration(
    border: OutlineInputBorder(),
    labelText: "テキストボックス",
    hintText: "まぁ何か入力してみてよ！",
  ),
)

これにより、下記のようなテキストボックスが生成される。

テキストボックスの装飾として、borderにOutlineInputBorderを指定し、枠で囲っている。

（２）入力値の表示と取得

ユーザーが入力したテキストを表示したい。

（あ）表示項目の作製

メンバ変数として、String型のm_inputedValueを追加し、下記のコードでその値を画面に表示するようにした。

Text("You input : ${this.m_inputedValue}")

（い）入力値の反映

ユーザー入力値をメンバ変数に都度代入するために、下記のコードを追加した。

TextField(
  decoration: InputDecoration(
    border: OutlineInputBorder(),
    labelText: "テキストボックス",
    hintText: "まぁ何か入力してみてよ！",
  ),

  // 変更を即時反映する。
  onChanged: (text) {
    if (text.length > 0) {
      // 入力値があるなら、それを反映する。
      setState(() {
        this.m_inputedValue = text;
      });
    }
    else {
      setState(() {
        this.m_inputedValue = "入力してください。";
      });
    }
  },
)

onChangedで、変更を検知し、setState内で値の更新を行っている。

こうしないと、画面に値が反映されなかった・・・

理由は不明。

入力値がある場合は、それを表示し、入力値がなければ入力を催促するテキストを表示する。

このコードの挙動は下記の通りである。

（ｉ）入力前

（ｉｉ）入力後

このように、入力値が画面項目に反映されることが確認できた。

３，サンプルコード全体

以上のサンプルコードの全体は、下記の通りである。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
      title: 'Test Textbox',
        primarySwatch: Colors.green,
      ),
      home: MyHomePage(title: 'Test TextBox !'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String m_inputedValue = "";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),

      body: Center(
        child: Column(
          children: <Widget>[
            // 入力結果を表示する
            Text('下記があなたが入力したテキストです。'),

            Text("You input : ${this.m_inputedValue}"),

            // 入力用テキストボックス
            TextField(
              decoration: InputDecoration(
                border: OutlineInputBorder(),
                labelText: "テキストボックス",
                hintText: "まぁ何か入力してみてよ！",
              ),

              // 最大入力可能文字数
              maxLength: 10,

              // 変更を即時反映する。
              onChanged: (text) {
                if (text.length > 0) {
                  // 入力値があるなら、それを反映する。
                  setState(() {
                    this.m_inputedValue = text;
                  });
                }
                else {
                  setState(() {
                      this.m_inputedValue = "入力してください。";
                  });
                }
              },
            ),
          ],
        ),
      ),
    );
  }
}

４，感想

入力した値がリアルタイムで他の画面項目へ反映できるなど、データバインディングのようなこともできるのかと驚いた。

入力と同時に画面項目の更新もされるし、最近の技術ってすごいな・・・#Flutter pic.twitter.com/7APAfF1gNh
— jskny (@jskny_tw) March 23, 2019

最近の技術ってすごいのね・・・

５，参考文献

Tag : dart, Flutter 作成者 : jskny

Sysrigar