【Flutter】入力フォームのバリデーションをチェックする方法【from_field_validator】

はじめに

from_field_validatorパッケージを使用すると簡単にバリデーションチェックを行うことができます。

今回は以下条件でバリデーションチェックを行います。

・入力欄が空になっていないか

・5文字以内で入力されているか

使用環境

VScode バージョン: 1.84.2

Flutter バージョン: 3.76.0

form_field_validator: ^1.1.0

実装

動作画面と実装コードです。

入力欄に本文を入力、入力チェックを押すとバリデーションチェックを行います。

【screen.dart】

class Varidators extends StatelessWidget {
  const Varidators({super.key});

  @override
  Widget build(BuildContext context) {

    const _formKey = GlobalObjectKey<FormState>('FORM_KEY');

    final textController = TextEditingController();

    return Scaffold(
      appBar: AppBar(
        title: const Text('validatorで入力フォームをチェック'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
        const Text('【入力条件】'),
        const Text('・入力欄が空ではない'),
        const Text('・5文字以内で入力'),
            // _formKeyを管理したいWidgetをForm()で囲う
        Form(
          key: _formKey,
          child: Row(
            children: [
            TextFormField(
              controller: textController,
              validator: textValidator,
              decoration: const InputDecoration(
              ),
              style: const TextStyle(fontSize: 18),
            ),
            ElevatedButton(
              onPressed: () {
                final name = textController.text;
                if (_formKey.currentState!.validate()) {
                  ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(content: Text('入力した[${name}]は入力条件を満たしています',
                        style: const TextStyle(
                          fontWeight: FontWeight.bold,
                          fontSize: 16)),
                    ),
                  );
                } else {
                  ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(backgroundColor: Colors.red,
                    content: Text('入力した[${name}]は入力条件を満たしていません',
                        style: const TextStyle(
                          fontWeight: FontWeight.bold,
                          fontSize: 16)),
                    )
                  );
                }
              },
              child: const Text("入力チェック")),
            ]
          )
        )]
      )
    );
  }
}

【varidators.dart】

final textValidator = MultiValidator([
  RequiredValidator(errorText: "本文を入力してください"),
  MaxLengthValidator(5, errorText: "本文は5文字以内で入力してください")
]);

解説

final textValidator = MultiValidator([
  RequiredValidator(errorText: "本文を入力してください"),
  MaxLengthValidator(5, errorText: "本文は5文字以内で入力してください")
]);

まずはバリデータを作成します。textValidatorと定義しておきます。

RequiredValidator　空の値をチェックするバリデータ

MaxLengthValidator　最大文字数をチェックするバリデータ

errorTextにはエラー時に表示させたいテキストを入力します。

const _formKey = GlobalObjectKey<FormState>('FORM_KEY');

ウィジェット内にGlobalKeyで_formKeyを作ります。

Form(
          key: _formKey,

_formKeyを管理したいウィジェットをForm()で囲います。

今回は入力欄のバリデーションチェックなのでTextFormFieldのウィジェットを囲います。

TextFormField(
              controller: textController,
              validator: textValidator,

先ほど作成したバリデータをvalidator:に書きます。

onPressed: () {
                final name = textController.text;
                if (_formKey.currentState!.validate()) {

入力チェックボタンを押した時の動作

条件式を使い、入力された文字列のバリデータの結果を判定します。

まとめ

いかがだったでしょうか？

ご意見、ご感想ありましたらお気軽にコメントしてください。

今回はシンプルなバリデーションチェックでしたが、正規表現を使用してURLのチェックなども実装できます。

バリデーションチェックは、アプリ開発において必須だと言えますのでぜひ挑戦してみてください。

【参考文献】