Improve Flutter Forms

password_form.dart

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

  @override
  State<PasswordForm> createState() => _PasswordFormState();
}

class _PasswordFormState extends State<PasswordForm> {
  bool _isPasswordObscure = true;
  final _passwordController = TextEditingController();
  void _toggleObscurePassword() =>
      setState(() => _isPasswordObscure = !_isPasswordObscure);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Password Form')),
      body: Center(
        child: Form(
          autovalidateMode: AutovalidateMode.onUserInteraction,
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              ConstrainedBox(
                constraints: const BoxConstraints(maxWidth: 256),
                child: TextFormField(
                  controller: _passwordController,
                  decoration: InputDecoration(
                      hintText: 'Create Password',
                      suffixIcon: InkWell(
                        onTap: _toggleObscurePassword,
                        child: Icon(_isPasswordObscure
                            ? Icons.visibility
                            : Icons.visibility_off),
                      )),
                  obscureText: _isPasswordObscure,
                  validator: (value) {
                    if (value == null || value.isEmpty) {
                      return 'Password is required.';
                    } else if (value.characters.length < 8) {
                      return 'Password should be at least 8 characters.';
                    } else {
                      return null;
                    }
                  },
                ),
              ),
              const SizedBox(height: 24),
              ConstrainedBox(
                constraints: const BoxConstraints(maxWidth: 256),
                child: TextFormField(
                  decoration: InputDecoration(
                      hintText: 'Confirm Password',
                      suffixIcon: InkWell(
                        onTap: _toggleObscurePassword,
                        child: Icon(_isPasswordObscure
                            ? Icons.visibility
                            : Icons.visibility_off),
                      )),
                  obscureText: _isPasswordObscure,
                  obscuringCharacter: '*',
                  validator: (value) {
                    if (value == null || value.isEmpty) {
                      return 'Confirm Password is required.';
                    } else if (value != _passwordController.text) {
                      return 'Passwords do not match.';
                    } else {
                      return null;
                    }
                  },
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

simple_form.dart

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

  @override
  State<SimpleForm> createState() => _SimpleFormState();
}

class _SimpleFormState extends State<SimpleForm> {
  var _formKey = GlobalKey<FormState>();
  final _nameController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Simple Form')),
      body: Center(
        child: Form(
          key: _formKey,
          autovalidateMode: AutovalidateMode.onUserInteraction,
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              ConstrainedBox(
                constraints: const BoxConstraints(maxWidth: 256),
                child: TextFormField(
                  controller: _nameController,
                  decoration:
                      const InputDecoration(hintText: 'Enter Your Name'),
                  maxLength: 20,
                  validator: (value) {
                    if (value == null || value.isEmpty) {
                      return 'Name is required.';
                    } else if (value.characters.length < 3) {
                      return 'Name should be at least 3 characters.';
                    } else {
                      return null;
                    }
                  },
                ),
              ),
              const SizedBox(height: 24),
              ElevatedButton(
                onPressed: () {
                  if (_formKey.currentState!.validate()) {
                    ScaffoldMessenger.of(context).showSnackBar(SnackBar(
                        content: Text("{'name': ${_nameController.text}}")));
                    setState(() {
                      _nameController.text = '';
                      _formKey = GlobalKey<FormState>();
                    });
                  }
                },
                child: const Text('Submit'),
              )
            ],
          ),
        ),
      ),
    );
  }
}