【学習メモ：Flutter入門編】TextFieldの使い方

これから「Flutter」を勉強していこうと思っている人向けには「メモ」程度で参照してみてください。

■ TextField（テキストフィールド）
文字を入力させるためのWidgetである。
アプリ上（スマホ）で操作すると、キーボードが下から表示される。

■ デコレーションの方法
「decoration」の項目を利用する事で簡単に見た目を変更する事が可能。

• border：入力欄にボーダーを表示
• labelText：入力欄にラベルを表示
• hintText：入力内容の説明を表示
• errorText：エラーが発生した際に 「動的」 に表示・非表示をカスタマイズ

【サンプルコード】

final text = TextField(
  decoration: InputDecoration(
    border: OutlineInputBorder(),
    labelText: 'お名前',
    hintText: 'フルネームで入力してください。',
    errorText: 'カタカナでの入力はできません。'
  ),
);

■ コントローラーについて
入力された文字を利用するために、コントローラーをWidgetに紐づけておく必要がある。
【サンプルコード】

+ final controller = TextEditingController();
  final text = TextField(
+   controller: controller,
    decoration: InputDecoration(
      border: OutlineInputBorder(),
      labelText: 'お名前',
      hintText: 'フルネームで入力してください。',
      errorText: 'カタカナでの入力はできません。'
    ),
  );

なお、上記プログラムで作成したコントローラーから、文字列を取得したい場合は「controller.text」で取得する事が可能。

■ 不要になったコントローラーのデータ削除について
不要になったコントローラーを削除するには以下のように定義する。

controller.dispose()

最後に

Flutter（Dart言語）に関する最低限の情報を「学習メモ」としてまとめてみました。
内容に誤りがありそうであれば、遠慮なくご指摘いただけますと幸いです。

【学習の参考にした動画】
素敵な解説動画の作成ありがとうございます。
本記事の内容より。動画を見た方が解りやすいと思います。