[Flutter] テキスト入力を行う

Flutterでテキスト入力を行う場合の方法を調べました。
Androidの場合はEditTextを活用しますが、Flutterの場合は何を使うのか、まずはそこから手探りの状態でスタートです。
また、状態が変化する画面を構築する場合についても調べたので、一緒にまとめておきます。
このあたりは、別途記事としてまとめていくことになるかと思いますが・・・

それでははじめましょう。

まずは全体の構成把握

Flutterの場合、AndroidのEditTextに該当するのはTextFormFieldというWidgetとなります。
今回は状態が変化する画面を構築するため、StatefulWidgetで作らないといけません。
そして、状態管理用のクラスが必要になります。
順番に見ていきましょう。

StatefulWidgetを継承したクラスの用意

class Sample extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _SampleState();
}

最初にここではSampleというStatefulWidgetから継承したクラスを用意します。
createState()のオーバーライドは必ず必要になります。
privateなクラスとして、ここでは_SampleStateという状態管理用のクラスを用意しています。

状態管理を行うクラスが本体

class _SampleState extends State<Sample> {
  String _message = '';
  TextEditingController _textEditingController;

  @override
  void initState() {
    super.initState();

    _textEditingController = TextEditingController(text: '初期テキストです');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("サンプルのタイトル"),
      ),
      body: TextFormField(
        controller: _textEditingController,
        decoration: const InputDecoration(
          border: const UnderlineInputBorder(),
          hintText: 'テキストを入力してください',
          labelText: 'サンプルテキスト',

        ),
        onChanged: (value) {
          setState() {
            _message = value;
          });
        },
      ),
    );
  }

  @override
  void dispose() {
    _textEditingController.dispose();
    super.dispose();
  }
}

続いて状態管理を行うクラスで、こちらが主な処理も実装する本体に位置づけられます。
State<Sample>を継承したSampleStateを定義していきます。

この中で、build()の中でbodyに指定しているTextFormFieldが今回の記事の主人公です。（ここまで長かった。。。）
以下のような指定になります。
– controller: テキスト入力の状態を監視するコントローラ
– decoration: テキスト入力の見た目を調整
– onChanged: setState()で変数に入力された内容を_messageに格納しています

ざっくりとした説明というか、私のメモです。

実行結果

実行するとこんなふうに表示されます。

まだまだUIには見直すべきところが多そうです。