【Flutter】Formウィジェットの仕組みとAutoValidationMode の罠 〜サンプルコードを添えて〜

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Flutter Form Example')),
        body: const Padding(padding: EdgeInsets.all(16.0), child: MyForm()),
      ),
    );
  }
}

class MyForm extends StatefulWidget {
  const MyForm({super.key});

  @override
  State<MyForm> createState() => _MyFormState();
}

class _MyFormState extends State<MyForm> {
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
  String _email = '';

  void _submit() {
    if (_formKey.currentState!.validate()) {
      _formKey.currentState!.save();
      print('Submitted: $_email');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          TextFormField(
            decoration: const InputDecoration(labelText: 'Email'),
            validator: (String? value) {
              if (value == null || value.isEmpty) {
                return 'Emailを入力してください';
              }
              return null;
            },
            onSaved: (String? value) {
              _email = value!;
            },
          ),
          const SizedBox(height: 16),
          ElevatedButton(onPressed: _submit, child: const Text('送信')),
        ],
      ),
    );
  }
}

Copy

class _MyFormState extends State<MyForm> {
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>(); // キーを生成・保持

Copy

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey, // Form に生成したキーを渡す

Copy

  void _submit() {
    if (_formKey.currentState!.validate()) {
      _formKey.currentState!.save();
      print('Submitted: $_email');
    }
  }

Copy

class FormField<T> extends StatefulWidget {
  const FormField({
    super.key,
    required this.builder,
    this.onSaved,
    this.forceErrorText,
    this.validator,
    this.initialValue,
    this.enabled = true,
    AutovalidateMode? autovalidateMode,
    this.restorationId,
  }) : autovalidateMode = autovalidateMode ?? AutovalidateMode.disabled;

  final FormFieldSetter<T>? onSaved;

  final String? forceErrorText;

  final FormFieldValidator<T>? validator;

  final FormFieldBuilder<T> builder;

  final T? initialValue;

  final bool enabled;

  final AutovalidateMode autovalidateMode;

  final String? restorationId;

  @override
  FormFieldState<T> createState() => FormFieldState<T>();
}

Copy

class FormFieldState<T> extends State<FormField<T>> with RestorationMixin {
  late T? _value = widget.initialValue;
  late final RestorableStringN _errorText;
  final RestorableBool _hasInteractedByUser = RestorableBool(false);
  final FocusNode _focusNode = FocusNode();

  T? get value => _value;

  String? get errorText => _errorText.value;

  bool get hasError => _errorText.value != null;

  bool get hasInteractedByUser => _hasInteractedByUser.value;

  bool get isValid => widget.forceErrorText == null && widget.validator?.call(_value) == null;

  void save() {
    widget.onSaved?.call(value);
  }

  void reset() {
    setState(() {
      _value = widget.initialValue;
      _hasInteractedByUser.value = false;
      _errorText.value = null;
    });
    Form.maybeOf(context)?._fieldDidChange();
  }

  bool validate() {
    setState(() {
      _validate();
    });
    return !hasError;
  }

  void _validate() {
    if (widget.forceErrorText != null) {
      _errorText.value = widget.forceErrorText;
      return;
    }
    if (widget.validator != null) {
      _errorText.value = widget.validator!(_value);
    } else {
      _errorText.value = null;
    }
  }

  void didChange(T? value) {
    setState(() {
      _value = value;
      _hasInteractedByUser.value = true;
    });
    Form.maybeOf(context)?._fieldDidChange();
  }

  @protected
  void setValue(T? value) {
    _value = value;
  }

  @override
  String? get restorationId => widget.restorationId;

  @protected
  @override
  void restoreState(RestorationBucket? oldBucket, bool initialRestore) {
    registerForRestoration(_errorText, 'error_text');
    registerForRestoration(_hasInteractedByUser, 'has_interacted_by_user');
  }

  @protected
  @override
  void deactivate() {
    Form.maybeOf(context)?._unregister(this);
    super.deactivate();
  }

  @protected
  @override
  void initState() {
    super.initState();
    _errorText = RestorableStringN(widget.forceErrorText);
  }

  @protected
  @override
  void didUpdateWidget(FormField<T> oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (widget.forceErrorText != oldWidget.forceErrorText) {
      _errorText.value = widget.forceErrorText;
    }
  }

  @protected
  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    switch (Form.maybeOf(context)?.widget.autovalidateMode) {
      case AutovalidateMode.always:
        WidgetsBinding.instance.addPostFrameCallback((_) {
          // If the form is already validated, don't validate again.
          if (widget.enabled && !hasError && !isValid) {
            validate();
          }
        });
      case AutovalidateMode.onUnfocus:
      case AutovalidateMode.onUserInteraction:
      case AutovalidateMode.disabled:
      case null:
        break;
    }
  }

  @override
  void dispose() {
    _errorText.dispose();
    _focusNode.dispose();
    _hasInteractedByUser.dispose();
    super.dispose();
  }

  @protected
  @override
  Widget build(BuildContext context) {
    if (widget.enabled) {
      switch (widget.autovalidateMode) {
        case AutovalidateMode.always:
          _validate();
        case AutovalidateMode.onUserInteraction:
          if (_hasInteractedByUser.value) {
            _validate();
          }
        case AutovalidateMode.onUnfocus:
        case AutovalidateMode.disabled:
          break;
      }
    }

    Form.maybeOf(context)?._register(this);

    if (Form.maybeOf(context)?.widget.autovalidateMode == AutovalidateMode.onUnfocus &&
            widget.autovalidateMode != AutovalidateMode.always ||
        widget.autovalidateMode == AutovalidateMode.onUnfocus) {
      return Focus(
        canRequestFocus: false,
        skipTraversal: true,
        onFocusChange: (bool value) {
          if (!value) {
            setState(() {
              _validate();
            });
          }
        },
        focusNode: _focusNode,
        child: widget.builder(this),
      );
    }

    return widget.builder(this);
  }
}

Copy

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('AutoValidation Behavior Demo')),
        body: const Padding(
          padding: EdgeInsets.all(16.0),
          child: AutoValidationBehaviorDemo(),
        ),
      ),
    ),
  );
}

class AutoValidationBehaviorDemo extends StatefulWidget {
  const AutoValidationBehaviorDemo({super.key});

  @override
  State<AutoValidationBehaviorDemo> createState() =>
      _AutoValidationBehaviorDemoState();
}

class _AutoValidationBehaviorDemoState
    extends State<AutoValidationBehaviorDemo> {
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
  bool validationStatus = false;

  AutovalidateMode _selectedMode = AutovalidateMode.disabled;

  void _validateAll() {
    setState(() {
      validationStatus = _formKey.currentState!.validate();
    });
  }

  void _reset() {
    _formKey.currentState!.reset();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Row(
          children: <Widget>[
            const Text('Form Validation Mode: '),
            DropdownButton<AutovalidateMode>(
              value: _selectedMode,
              items: const <DropdownMenuItem<AutovalidateMode>>[
                DropdownMenuItem<AutovalidateMode>(
                  value: AutovalidateMode.disabled,
                  child: Text('disabled'),
                ),
                DropdownMenuItem<AutovalidateMode>(
                  value: AutovalidateMode.always,
                  child: Text('always'),
                ),
                DropdownMenuItem<AutovalidateMode>(
                  value: AutovalidateMode.onUserInteraction,
                  child: Text('onUserInteraction'),
                ),
                DropdownMenuItem<AutovalidateMode>(
                  value: AutovalidateMode.onUnfocus,
                  child: Text('onUnfocus'),
                ),
              ],
              onChanged: (AutovalidateMode? mode) {
                setState(() {
                  _selectedMode = mode!;
                });
              },
            ),
          ],
        ),
        const SizedBox(height: 20),
        Form(
          key: _formKey,
          autovalidateMode: _selectedMode,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              const Text('FormField Validation Mode: disabled'),
              TextFormField(
                autovalidateMode: AutovalidateMode.disabled,
                validator: (String? value) {
                  if (value == null || value.isEmpty) {
                    return '必須です';
                  }
                  return null;
                },
              ),
              const SizedBox(height: 20),
              const Text('FormField Validation Mode: always'),
              TextFormField(
                autovalidateMode: AutovalidateMode.always,
                validator: (String? value) {
                  if (value == null || value.isEmpty) {
                    return '必須です';
                  }
                  return null;
                },
              ),
              const SizedBox(height: 20),
              const Text('FormField Validation Mode: onUserInteraction'),
              TextFormField(
                autovalidateMode: AutovalidateMode.onUserInteraction,
                validator: (String? value) {
                  if (value == null || value.isEmpty) {
                    return '必須です';
                  }
                  return null;
                },
              ),
              const SizedBox(height: 20),
              const Text('onUnfocus'),
              TextFormField(
                autovalidateMode: AutovalidateMode.onUnfocus,
                validator: (String? value) {
                  if (value == null || value.isEmpty) {
                    return '必須です';
                  }
                  return null;
                },
              ),
              const SizedBox(height: 40),
              Row(
                children: <Widget>[
                  const Text('Validation Status'),
                  const SizedBox(width: 10),
                  Icon(validationStatus ? Icons.verified : Icons.error),
                ],
              ),
              const SizedBox(height: 10),
              Row(
                children: <Widget>[
                  ElevatedButton(
                    onPressed: _validateAll,
                    child: const Text('Validate All'),
                  ),
                  const SizedBox(width: 20),
                  ElevatedButton(
                    onPressed: _reset,
                    child: const Text('Reset'),
                  ),
                ],
              ),
            ],
          ),
        ),
      ],
    );
  }
}

Copy