作成の流れ

TextFormFieldを作成

// 入力フォーム（メールアドレス）
TextFormField(
  decoration: const InputDecoration(labelText: 'メールアドレス'),
  keyboardType: TextInputType.emailAddress,
),

FormのkeyパラメータにGlobalKey<FormState>を設定する
設定したGlobalKey<FormState>に対してバリデーションを行うと、入力内容の確認とエラーメッセージの表示を行うことができる

final _formKey = GlobalKey<FormState>();

body: Form(
  key: _formKey,
  child: TextFormField(
    decoration: const InputDecoration(labelText: 'メールアドレス'),
    keyboardType: TextInputType.emailAddress,
  ),
),

TextFormFieldのvalidatorパラメータを設定する

TextFormField(
  decoration: const InputDecoration(labelText: 'メールアドレス'),
  keyboardType: TextInputType.emailAddress,
  validator: (String? value) {
    // メールアドレスが入力されていない場合
    if (value?.isEmpty == true) {
      // 問題があるときはメッセージを返す
      return 'メールアドレスを入力して下さい';
    }
    // 問題ないときはnullを返す
    return null;
  },
),

バリデーションを実行する

SizedBox(
  width: double.infinity,
  child: ElevatedButton(
    // ログインボタンをタップしたときの処理
    onPressed: () => _onSignIn(),
    child: const Text('ログイン'),
  ),
),

void _onSignIn() {
  // 入力内容を確認する
  if (_formKey.currentState?.validate() != true) {
    // エラーメッセージがあるため処理を中断する
    return;
  }
}

カワグチミサキ

細かいバリデーションの設定

// 入力フォーム（メールアドレス）
TextFormField(
  decoration: const InputDecoration(
    labelText: 'メールアドレス',
  ),
  validator: (String? value) {
    if(value != null){
      String pattern = r'^[0-9a-z_./?-]+@([0-9a-z-]+\.)+[0-9a-z-]+$';
      RegExp regExp = RegExp(pattern);
      if(!regExp.hasMatch(value)){
        return '正しいメールアドレスを入力してください';
      }
    }
  },
),

// 入力フォーム（パスワード）
TextFormField(
  decoration: const InputDecoration(labelText: 'パスワード',),
  keyboardType: TextInputType.visiblePassword,
  obscureText: true,
  validator: (String? value) {
    if(value != null){
      String pattern = r'^[a-zA-Z0-9]{10,}$';
      RegExp regExp = RegExp(pattern);
      if(!regExp.hasMatch(value)){
        return '10文字以上の英数字を入力してください';
      }
    }
  },
),

※入力途中でバリデーションを行いたいときは、
autovalidateMode: AutovalidateMode.onUserInteractionを追加する。

カワグチミサキ

リファクタリング

// 入力フォーム（メールアドレス）
TextFormField(
  decoration: const InputDecoration(
    labelText: 'メールアドレス',
  ),
  validator: ValidateText.validate.email,
),

// 入力フォーム（パスワード）
TextFormField(
  decoration: const InputDecoration(labelText: 'パスワード',),
  keyboardType: TextInputType.visiblePassword,
  obscureText: true,
  validator: ValidateText.validate.password,
),

class ValidateText {
  static ValidateText validate = ValidateText();
  static String? email(String? value) {
    if(value != null){
      String pattern = r'^[0-9a-z_./?-]+@([0-9a-z-]+\.)+[0-9a-z-]+$';
      RegExp regExp = RegExp(pattern);
      if(!regExp.hasMatch(value)){
        return '正しいメールアドレスを入力してください';
      }
    }
    return null;
  }

  static String? password(String? value) {
    if(value != null){
      const pattern = r'^[a-zA-Z0-9]{10,}$';
      final regExp = RegExp(pattern);
      if(!regExp.hasMatch(value)){
        return '10文字以上の英数字を入力してください';
      }
    }
    return null;
  }
}