Flutter で reactive_forms を使った場合のバリデーション方法

reactive_forms を使った場合のバリデーション　　

Flutter でアプリ開発をする中で学んだことをブログに残していきます。
少しでも誰かのお役に立てれば、幸いです。

今日は、認証画面を作成していました。
認証画面とは、アプリを初めて使うときに利用者のアカウント作成やログインをする画面のことです。

「Google でログイン」や「LINE でログイン」など、 便利な認証方法がありますが、

"Email アドレス" と "パスワード" を使う認証は、まだまだ必要です。
この、アドレスやパスワードが正しく入力されているかを確認する工程がバリデーションになります。

完成品がこちらです。

実装方法

パッケージの導入は割愛します。
まずは、FormGroup を作成し、その中で validator を設定します。
email と password の validator を設定しました。

  FormGroup form = FormGroup({
    'email': FormControl<String>(
      validators: [
        Validators.required,
        Validators.email,
      ],
    ),
    'password': FormControl<String>(validators: [
      Validators.required,
      Validators.minLength(8),
    ]),
  });

あとはテキストフィールドを実装します。

ReactiveForm(
  formGroup: form,
  child: ReactiveTextField(
          formControlName: 'email',
          validationMessages: (control) => {
              ValidationMessage.required: 'Emailアドレスを入力してください。',
              ValidationMessage.email: '正しくEmailアドレスを入力してください。'
            },
          ),
        ),

style: や decoration: を指定することで、テキストフィールドの見た目を整えることもできます。
このように簡単にバリデーションを実装することができました。

<参考にしたサイト>

https://pub.dev/packages/reactive_forms
https://dev.to/joanpablo/why-use-reactive-forms-in-flutter-ea1