Flutterのバリデーション｜未入力・文字数・メール形式チェックの基本

バリデーションは、ユーザー入力が正しいか確認する処理です。

この記事の結論

最初は未入力、文字数、メール形式の3つをvalidatorで書ければ十分です。

未入力チェック

空ならエラーメッセージを返します。

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;
}

メール形式チェック

簡易的な形式チェックを行います。

String? email(String? value) {
  final text = value ?? "";
  if (!text.contains("@")) {
    return "メールアドレスを入力してください";
  }
  return null;
}

実装後に確認すること

• 画面上で余白や入力が意図通りか確認したか
• 小さい画面で崩れないか確認したか
• 状態管理や画面遷移の責務を混ぜすぎていないか
• 関連する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 バリデーションはFlutter UIを作るうえでよく使う基本です。最小コードで動きを確認し、関連Widgetと使い分けながら画面を組み立てましょう。