Flutter TextEditingControllerの使い方｜入力値の取得とdispose

TextEditingControllerは、TextFieldの入力値をコード側から読んだり変更したりするためのクラスです。

この記事の結論

入力値を送信時にまとめて読みたい場合や初期値を入れたい場合に使います。使い終わったらdisposeします。

Controllerを作る

StatefulWidgetのStateに置きます。

final controller = TextEditingController();

TextFieldへ渡す

controllerプロパティへ指定します。

TextField(
  controller: controller,
  decoration: const InputDecoration(labelText: "名前"),
)

値を取得して破棄する

textで値を読み、disposeで解放します。

print(controller.text);

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

実装後に確認すること

• 画面上で余白や入力が意図通りか確認したか
• 小さい画面で崩れないか確認したか
• 状態管理や画面遷移の責務を混ぜすぎていないか
• 関連するWidgetとの使い分けを説明できるか

よくあるつまずき

• 便利なWidgetに役割を詰め込みすぎる
• 固定サイズや固定余白だけで作る
• 入力値の破棄やバリデーションを忘れる
• ListViewやGridViewをColumn内で高さ指定なしに置く

次に読む記事

• Flutter Containerの使い方｜余白・背景色・サイズ指定の基本 — FlutterのContainerを初心者向けに解説します。サイズ、余白、背景色、角丸、中央配置など、画面レイアウトでよく使う基本を整理します。
• Flutter ListViewの使い方｜縦スクロール・横スクロール・builderの違い — FlutterのListViewを初心者向けに解説します。childrenで作る基本、ListView.builderとの違い、横スクロール、Column内での注意点を整理します。
• Flutter StatefulWidgetの使い方｜状態を持つ画面を作る基本 — FlutterのStatefulWidgetを初心者向けに解説します。StatelessWidgetとの違い、Stateクラス、setState、カウンター例を使って状態更新の流れを整理します。

まとめ

Flutter TextEditingControllerはFlutter UIを作るうえでよく使う基本です。最小コードで動きを確認し、関連Widgetと使い分けながら画面を組み立てましょう。