Flutterでカスタムフォームを作成し独自のバリデーションを実装する方法

FormFieldの概要

FormFieldウィジェットは、Flutterのフォームでカスタムのフォームフィールドを作成するための基底クラスです。これを利用することで、任意のデータ入力ロジックを持つカスタムウィジェットをフォームフィールドとして組み込むことが可能になります。FormFieldはFormウィジェットと組み合わせて使用され、データの検証（バリデーション）、保存、リセットなどのフォーム操作を簡単に実装できます。

FormFieldを使った独自入力フォームの作成例

以下は、独自のFormFieldを作成するサンプルコードです。
この例では、単純にチェックボックスをカスタムフォームとして実装しています。もちろん、チェックボックス以外にも任意のウィジットを配置できます。

FormField(
  builder: (state) => Column(
    children: [
      Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Checkbox(
              value: checked,
              onChanged: (value) {
                setState(() {
                  checked = value;
                });
              }),
          Text("利用規約に同意する")
        ],
      )
    ],
  ),
)

独自の入力フォームでバリデーションを行う方法

FormFieldを使用したバリデーションは、validatorプロパティを通じて行います。バリデーション関数内で入力値のチェックを行い、問題がある場合はエラーメッセージを返すことで入力エラーをユーザーに知らせることができます。

以下の例では、validator関数で「利用規約に同意する」がチェックオフの場合はエラーメッセージを返しています。このバリデーションはFormState.validate関数が呼ばれた際に実行されます。

class _SampleCustomFormState extends State<PtestWidget> {
  bool? checked = false;
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("サンプル"),
      ),
      body: Form(
        key: _formKey,
        child: Column(
          children: [
            FormField(
              builder: (state) => Column(
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Checkbox(
                          value: checked,
                          onChanged: (value) {
                            setState(() {
                              checked = value;
                            });
                          }),
                      Text("利用規約に同意する")
                    ],
                  ),
                  // バリデーションエラーが存在する場合、エラーメッセージーを表示
                  state.errorText != null ? Text(
                    state.errorText ?? "",
                    style: TextStyle(
                        fontSize: 12,
                        color: Theme.of(context).colorScheme.error),
                  ) : SizedBox()
                ],
              ),
              // バリデーションの設定
              validator: (value) {
                if (!(checked ?? false)) {
                  return "利用規約に同意してください。";
                }
                return null;
              },
            ),
            ElevatedButton(
              onPressed: () {
                // 入力チェックを開始
                if (!(_formKey.currentState!.validate())) {
                  return;
                }
                debugPrint("入力チェック正常時の処理...");
              },
              child: Text("登録"),
            )
          ],
        ),
      ),
    );
  }
}

＜実行結果＞

まとめ

FormFieldウィジェットを利用することで、Flutterで柔軟かつ機能豊富なカスタムフォームフィールドを簡単に作成することができます。バリデーション機能を組み込むことで、ユーザーからの入力が正しい形式であることを保証し、アプリケーションの信頼性を高めることが可能です。