FlutterのFormは、複数の入力欄をまとめて検証・保存するためのWidgetです。ログイン、お問い合わせ、会員登録など「入力→チェック→送信」の画面はほぼFormとTextFormFieldで組み立てます。
この記事の結論
GlobalKey<FormState>でFormの状態を握り、各入力欄をTextFormFieldにしてvalidatorを書き、送信ボタンでvalidate()すれば動きます。まずは未入力・文字数・メール形式の3つのバリデーションを押さえれば実用になります。
Formの基本構造
Formには状態にアクセスするためのGlobalKeyを渡します。中の入力欄はColumnなどで並べます。
final formKey = GlobalKey<FormState>();
Form(
key: formKey,
child: Column(
children: [
TextFormField(decoration: const InputDecoration(labelText: "名前")),
TextFormField(decoration: const InputDecoration(labelText: "メール")),
],
),
)TextFormFieldとvalidatorで入力チェック
TextFormFieldは、Formと組み合わせて検証しやすくしたTextFieldです。validatorはエラー時にメッセージ文字列を、問題なければnullを返します。
TextFormField(
decoration: const InputDecoration(labelText: "メール"),
validator: (value) {
if (value == null || value.trim().isEmpty) {
return "入力してください";
}
if (!value.contains("@")) {
return "メールアドレスの形式で入力してください";
}
return null;
},
)よく使うバリデーションの型
未入力・文字数・形式の3パターンを関数に切り出しておくと、複数の入力欄で使い回せます。
String? requiredText(String? value) {
if (value == null || value.trim().isEmpty) return "入力してください";
return null;
}
String? minLength(String? value) {
if (value == null || value.length < 8) return "8文字以上で入力してください";
return null;
}送信時に検証して保存する
ボタン押下時にvalidate()を呼び、全入力欄がOKならsave()でonSavedを実行して値を確定します。
String email = "";
ElevatedButton(
onPressed: () {
if (formKey.currentState!.validate()) {
formKey.currentState!.save();
// ここでAPI送信などへ進む
}
},
child: const Text("送信"),
);
TextFormField(
onSaved: (value) {
email = value ?? "";
},
)実装後に確認すること
- 未入力・不正な形式のときにエラーメッセージが表示されるか確認したか
- 送信ボタンでvalidate()が全入力欄をチェックしているか確認したか
- 入力値の取得をonSavedとControllerのどちらで行うか整理したか
- 小さい画面でキーボード表示時にレイアウトが崩れないか確認したか
よくあるつまずき
- FormにGlobalKeyを渡し忘れてvalidate()が呼べない
- TextFieldのまま使いvalidatorが書けずに困る（Form内はTextFormField）
- validatorでnullを返し忘れ、常にエラー扱いになる
- save()を呼ばずonSavedの値が反映されない
次に読む記事
- Flutter TextFieldの使い方｜入力値の取得・Controller・キーボード種別 — Flutter TextFieldの使い方を初心者向けに解説します。InputDecorationでの表示、onChangedとTextEditingControllerによる入力値の取得、disposeでの解放、keyboardTypeでのキーボード切り替えまでを整理します。
- Flutter StatefulWidgetの使い方｜状態を持つ画面を作る基本 — FlutterのStatefulWidgetを初心者向けに解説します。StatelessWidgetとの違い、Stateクラス、setState、カウンター例を使って状態更新の流れを整理します。
- Flutterの画面遷移｜Navigator.pushとpopの基本 — Flutterの画面遷移を初心者向けに解説します。Navigator.push、MaterialPageRoute、pop、値を渡す考え方、go_routerとの違いを整理します。
まとめ
Flutter Formの使い方は、GlobalKey・TextFormField・validator・validate/saveの4点で理解できます。未入力・文字数・形式の基本バリデーションを小さく試し、送信処理や画面遷移へつなげましょう。