TextFormFieldは、Formと組み合わせて入力チェックをしやすいTextFieldです。
この記事の結論
入力チェックが必要なフォームでは、TextFieldよりTextFormFieldを使うと整理しやすくなります。
Formで包む
Formの中にTextFormFieldを置きます。
final formKey = GlobalKey<FormState>();
Form(
key: formKey,
child: TextFormField(
decoration: const InputDecoration(labelText: "メール"),
),
)validatorを書く
未入力や形式エラーを返します。
TextFormField(
validator: (value) {
if (value == null || value.isEmpty) {
return "入力してください";
}
return null;
},
)送信時に検証する
validateがtrueなら次の処理へ進みます。
if (formKey.currentState!.validate()) {
print("送信できます");
}実装後に確認すること
- 画面上で余白や入力が意図通りか確認したか
- 小さい画面で崩れないか確認したか
- 状態管理や画面遷移の責務を混ぜすぎていないか
- 関連する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 TextFormFieldはFlutter UIを作るうえでよく使う基本です。最小コードで動きを確認し、関連Widgetと使い分けながら画面を組み立てましょう。