【flutter】TextFormFieldでバリデーションを実装するには？

こんにちは！
今回はTextFormFieldでバリデーションを実装する方法について紹介したいと思います！
今回も最後まで読んでいただけたら嬉しいです。

1,　バリデーションの実装方法

TextFormFieldを作成

TextFormFieldを作成し、バリデーター関数を指定します。このウィジェットは、ユーザーにテキスト入力を促し、入力されたテキストを検証します。

TextFormField(
  decoration: InputDecoration(
    labelText: '入力テスト',
  ),
  validator: バリデーター関数,
)

エラーメッセージの表示:

バリデーションエラーメッセージがある場合は、それをユーザーに表示します。Formウィジェット内にTextFormFieldを配置し、FormのautovalidateModeプロパティをAutovalidateMode.alwaysに設定することで、エラーメッセージを自動的に表示できます。

Form(
  autovalidateMode: AutovalidateMode.always,
  child: TextFormField(
    decoration: InputDecoration(
      labelText: '入力テスト',
    ),
    validator: (value) {
      if (value.isEmpty) {
        return 'メールアドレスを入力してください';
      }
      if (!EmailValidator.validate(value)) {
        return '有効なメールアドレスを入力してください';
      }
      return null; // バリデーションが成功した場合はnullを返す
    },
  ),
)

バリデーター関数の例として、入力値が空である場合や、有効なメールアドレスの形式でない場合にエラーメッセージを返す処理を記述しています。EmailValidator.validate()は、入力値が有効なメールアドレスの形式であるかどうかを判定するためのヘルパーメソッドです。

2,　バリデーションの種類

数値の範囲チェック

入力された数値が特定の範囲内にあることを確認するために利用します。例えば、特定の範囲外の数値が入力された場合にエラーを返します。

validator: (value) {
  if (value < 0 || value > 100) {
    return '0から100の間の値を入力してください';
  }
  return null;
},

正規表現によるチェック

入力された値が特定のパターンに一致するかどうかを確認するために利用します。例えば、メールアドレスや電話番号の形式をチェックする際によく使用されます。

import 'package:flutter/services.dart';

validator: (value) {
  final RegExp emailRegex =
      RegExp(r'^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$');
  if (!emailRegex.hasMatch(value)) {
    return '有効なメールアドレスを入力してください';
  }
  return null;
},

終わりに

今回の記事は以上になります！
では、また次の記事で〜！