Flutter表单生成插件former_gen的使用

前言

former_gen 是一个用于生成表单代码的插件，可以帮助开发者快速构建表单类。它通过代码生成的方式简化了表单的创建过程，并提供了强大的功能来验证表单字段。

使用步骤

以下是使用 former_gen 的详细步骤：

1. 安装依赖

确保你的项目中已经安装了 build_runner。如果没有安装，可以通过以下命令安装：

flutter pub add build_runner

2. 创建表单类并添加注解

在你的表单类上添加 @Formable 注解。例如：

import 'package:former/annotations.dart';

@Formable()
class MyForm {
  // 表单字段定义
}

3. 添加生成文件引用

在表单类之前添加以下代码：

part 'my_form.g.dart';

注意：my_form.g.dart 是生成文件的名称，可以根据实际文件名调整。

4. 扩展生成的类

扩展生成的类以使用生成的功能。例如：

class MyForm = _MyForm with _$MyFormIndexable;

5. 运行代码生成器

运行以下命令以生成代码：

flutter pub run build_runner build

生成的 .g.dart 文件将位于与表单类相同的目录下。

生成的内容

1. 可用的混入类

生成的代码包括一个混入类，使表单类支持通过方括号操作符访问字段。例如：

void main() {
  final form = MyForm();
  form['name'] = 'John Doe'; // 使用方括号访问字段
  print(form['name']); // 输出 'John Doe'
}

2. 字段枚举类

生成的代码还包括一个枚举类，包含表单的所有字段。该枚举类通常用于指定 Former 小部件应控制的字段。例如：

enum MyFormField {
  name,
  email,
  age,
}

3. 表单验证类

当你使用 Former 小部件时，需要创建一个表单验证类。该类可以使用内置的验证器或自定义实现。例如：

class MyFormSchema extends FormSchema {
  [@override](/user/override)
  Map<String, Validator> get fields => {
        'name': RequiredValidator(),
        'email': EmailValidator(),
        'age': MinValueValidator(18),
      };
}

示例代码

以下是一个完整的示例，展示如何使用 former_gen 构建表单。

1. 定义表单类

import 'package:former/annotations.dart';

@Formable()
class UserForm {
  String? name;
  String? email;
  int? age;
}

2. 添加生成文件引用

part 'user_form.g.dart';

3. 扩展生成的类

class UserForm = _UserForm with _$UserFormIndexable;

4. 创建表单验证类

import 'package:former/form_schema.dart';

class UserFormSchema extends FormSchema {
  [@override](/user/override)
  Map<String, Validator> get fields => {
        'name': RequiredValidator(),
        'email': EmailValidator(),
        'age': MinValueValidator(18),
      };
}

5. 使用表单

import 'package:flutter/material.dart';
import 'package:former/former.dart';
import 'user_form.g.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Form Example')),
        body: FormExample(),
      ),
    );
  }
}

class FormExample extends StatefulWidget {
  [@override](/user/override)
  _FormExampleState createState() => _FormExampleState();
}

class _FormExampleState extends State<FormExample> {
  final UserForm _form = UserForm();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Former(
      schema: UserFormSchema(),
      builder: (context, state) {
        return Column(
          children: [
            TextFormField(
              decoration: InputDecoration(labelText: 'Name'),
              onChanged: (value) => _form['name'] = value,
            ),
            TextFormField(
              decoration: InputDecoration(labelText: 'Email'),
              onChanged: (value) => _form['email'] = value,
            ),
            TextFormField(
              decoration: InputDecoration(labelText: 'Age'),
              onChanged: (value) => _form['age'] = int.tryParse(value),
            ),
            ElevatedButton(
              onPressed: () {
                if (_form.validate()) {
                  print('Form is valid!');
                } else {
                  print('Form is invalid!');
                }
              },
              child: Text('Submit'),
            ),
          ],
        );
      },
    );
  }
}