Flutter TextFieldの使い方｜入力値の取得・Controller・キーボード種別

TextFieldは、ユーザーに文字を入力してもらうための基本Widgetです。検索欄やメモ入力など、Flutterの画面で最もよく使う入力部品です。入力値の受け取り方には、その場で受け取るonChangedと、あとでまとめて読むTextEditingControllerの2通りがあります。

この記事の結論

表示だけならTextFieldとInputDecoration、入力のたびに値が欲しいならonChanged、送信時にまとめて読みたいならTextEditingControllerを使います。Controllerを使ったら必ずdisposeで解放します。

最小のTextField

InputDecorationでラベルやヒントを付けた入力欄を表示します。

TextField(
  decoration: const InputDecoration(
    labelText: "名前",
    hintText: "山田太郎",
  ),
)

onChangedで入力値を受け取る

入力のたびに値が渡されます。検索欄のように打ち込みながら反応させたい場合に向きます。

String keyword = "";

TextField(
  onChanged: (value) {
    keyword = value;
  },
)

TextEditingControllerで値を読む

送信ボタンを押したときにまとめて値を読みたい場合や、初期値を入れたい場合はControllerを使います。StatefulWidgetのStateに持たせ、textプロパティで現在の入力値を取得します。

final controller = TextEditingController(text: "初期値");

TextField(controller: controller);

// 送信時などに読む
print(controller.text);

Controllerは必ずdisposeする

Controllerはメモリを確保するため、画面が破棄されるタイミングで解放しないとリークします。Stateのdisposeでcontrollerをdisposeします。

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

キーボード種別を変える

メールや数値の入力ではkeyboardTypeを指定すると、適切なキーボードが表示され入力ミスが減ります。

TextField(
  keyboardType: TextInputType.emailAddress,
  decoration: const InputDecoration(labelText: "メール"),
)

実装後に確認すること

• 入力値の取得をonChangedとControllerのどちらで行うか決めたか
• Controllerを使った場合にdisposeを書いたか
• メールや数値でkeyboardTypeを指定したか
• 入力チェックが必要ならFormとTextFormFieldに移行する判断をしたか

よくあるつまずき

• Controllerのdispose忘れでメモリリークや警告が出る
• onChangedとControllerを二重に使い、値の管理が分散する
• StatelessWidgetにControllerを置いて再生成されてしまう
• 入力チェックが必要なのにTextFieldのまま作り込む（Form向きはTextFormField）

次に読む記事

• Flutter Formの使い方｜TextFormFieldとバリデーションで入力検証 — FlutterのFormを初心者向けに解説します。GlobalKeyとTextFormField、validatorによる未入力・文字数・メール形式のバリデーション、validate/saveで複数入力をまとめて検証・保存する流れを整理します。
• Flutter StatefulWidgetの使い方｜状態を持つ画面を作る基本 — FlutterのStatefulWidgetを初心者向けに解説します。StatelessWidgetとの違い、Stateクラス、setState、カウンター例を使って状態更新の流れを整理します。
• Flutter Containerの使い方｜余白・背景色・サイズ指定の基本 — FlutterのContainerを初心者向けに解説します。サイズ、余白、背景色、角丸、中央配置など、画面レイアウトでよく使う基本を整理します。

まとめ

Flutter TextFieldの使い方は、表示・onChanged・Controllerの3点で整理できます。値をいつ読むかで手段を選び、Controllerを使ったらdisposeを忘れずに。入力チェックが必要になったらFormとTextFormFieldへ進みましょう。