Flutter表单验证插件formality的使用

Formality 是一个用于 Flutter 的简单表单验证库。它可以帮助开发者轻松实现表单字段的验证，并且支持动画效果来提示用户输入错误。

示例

以下是一个完整的示例，展示了如何使用 Formality 来创建一个带有验证功能的表单。

完整代码

import 'package:flutter/material.dart';
import 'package:formality/formality.dart';

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

// 定义表单数据模型
class ExampleFormModel {
  final String firstName;
  final String lastName;
  final String email;

  ExampleFormModel({
    this.firstName = '',
    this.lastName = '',
    this.email = '',
  });

  ExampleFormModel copyWith({
    String? firstName,
    String? lastName,
    String? email,
  }) {
    return ExampleFormModel(
      firstName: firstName ?? this.firstName,
      lastName: lastName ?? this.lastName,
      email: email ?? this.email,
    );
  }
}

// 定义正则表达式用于验证
final nameRegex = RegExp(r"[a-zA-Z0-9 \.´'‘’]");
final emailRegex = RegExp(
  r"[a-zA-Z0-9.a-zA-Z0-9.!#$%&'*+-/=?^_`{|}~]+@[a-zA-Z0-9]+\.[a-zA-Z]+",
);

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const ExampleFormPage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Formality')),
      body: FormBuilder(
        initialFormData: ExampleFormModel(firstName: 'John'),
        builder: (context, formData, controller) {
          final ExampleFormModel(:firstName, :lastName, :email) = formData;

          return Center(
            child: FractionallySizedBox(
              widthFactor: 0.7,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  // 验证名字字段
                  Validation(
                    valid: nameRegex.hasMatch(firstName) && firstName.isNotEmpty,
                    error: const Text(
                      'Invalid first name',
                      style: TextStyle(color: Colors.red),
                    ),
                    child: TextFormField(
                      initialValue: firstName,
                      decoration: const InputDecoration(
                        labelText: 'First name',
                      ),
                      onChanged: (value) {
                        controller.setForm(
                          formData.copyWith(firstName: value),
                        );
                      },
                    ),
                  ),
                  // 验证姓氏字段
                  Validation(
                    valid: nameRegex.hasMatch(lastName) && lastName.isNotEmpty,
                    error: const Text(
                      'Invalid last name',
                      style: TextStyle(color: Colors.red),
                    ),
                    child: TextFormField(
                      initialValue: lastName,
                      decoration: const InputDecoration(
                        labelText: 'Last name',
                      ),
                      onChanged: (value) {
                        controller.setForm(
                          formData.copyWith(lastName: value),
                        );
                      },
                    ),
                  ),
                  // 验证邮箱字段
                  Validation(
                    valid: emailRegex.hasMatch(email),
                    error: const Text(
                      'Invalid email',
                      style: TextStyle(color: Colors.red),
                    ),
                    child: TextFormField(
                      initialValue: email,
                      decoration: const InputDecoration(
                        labelText: 'Email',
                      ),
                      onChanged: (value) {
                        controller.setForm(
                          formData.copyWith(email: value),
                        );
                      },
                    ),
                  ),
                  // 提交按钮
                  Padding(
                    padding: const EdgeInsets.only(top: 20),
                    child: ElevatedButton(
                      onPressed: () {
                        if (controller.validate()) {
                          ScaffoldMessenger.of(context).showSnackBar(
                            const SnackBar(
                              content: Text('Submitted!'),
                              backgroundColor: Colors.green,
                            ),
                          );
                        } else {
                          ScaffoldMessenger.of(context).showSnackBar(
                            const SnackBar(
                              content: Text('Error!'),
                              backgroundColor: Colors.redAccent,
                            ),
                          );
                        }
                      },
                      child: const Text('Submit'),
                    ),
                  ),
                ],
              ),
            ),
          );
        },
      ),
    );
  }
}

运行效果

运行上述代码后，您将看到一个简单的表单，包含三个字段：名字、姓氏和邮箱。每个字段都有验证规则：

• 名字和姓氏必须符合正则表达式 [a-zA-Z0-9 \.´'‘’]。
• 邮箱必须符合标准的电子邮件格式。

当用户提交表单时，如果验证失败，会弹出红色错误提示；如果验证通过，则会显示绿色成功提示。

动画效果

所有验证错误提示都带有动画效果，如图所示：

自定义动画

如果您想自定义字段的动画效果，可以使用 Validation.childAnimationBuilder 和 Validation.errorAnimationBuilder。

例如：

Validation(
  valid: emailRegex.hasMatch(email),
  error: const Text(
    'Invalid email',
    style: TextStyle(color: Colors.red),
  ),
  childAnimationBuilder: (context, child) => ScaleTransition(
    scale: AlwaysStoppedAnimation(0.8),
    child: child,
  ),
  errorAnimationBuilder: (context, child) => SlideTransition(
    position: Tween<Offset>(
      begin: const Offset(0, -1),
      end: Offset.zero,
    ).animate(
      CurvedAnimation(
        parent: AnimationController(
          vsync: context,
          duration: const Duration(milliseconds: 500),
        ),
        curve: Curves.easeInOut,
      ),
    ),
    child: child,
  ),
  child: TextFormField(
    initialValue: email,
    decoration: const InputDecoration(
      labelText: 'Email',
    ),
    onChanged: (value) {
      controller.setForm(
        formData.copyWith(email: value),
      );
    },
  ),
),