Flutter表单管理插件formi的使用

formi 是一个极简主义的表单构建器，具有空安全性和无依赖性。它受到 flutter_form_builder 的启发。

开始使用

formi 不包含UI组件，但它可以帮助你构建自己的UI，从而让你拥有 完全的控制权。

你可以查看 example 文件夹，里面包含了一些组件来帮助你开始。

1. 创建一个继承自 FormiField 的小部件

例如，你可以创建一个复选框字段，如下所示：

class FormiCheckbox extends FormiField<bool> {
  final String title;
  final String? subtitle;

  FormiCheckbox({
    required this.title,
    required String name,
    this.subtitle,
    List<FormiValidator<bool>>? validators,
    bool? initialValue,
    bool? enabled = true,
  }) : super(
          name: name,
          validators: validators,
          initialValue: initialValue,
          enabled: enabled,
          builder: (field) {
            return CheckboxListTile(
              dense: true,
              title: Text(title),
              value: field.value ?? false,
              onChanged: field.didChange,
              contentPadding: EdgeInsets.zero,
            );
          },
        );
}

2. 将你的表单包装在 Formi 容器中

Formi 中的字段需要一个唯一的 name，用于保存字段的值。

Formi(
  child: Column(
    children: [
        Text('隐私偏好设置'),
        FormiCheckbox(
            name: 'strict',
            title: '严格必要',
            subtitle: '应用程序正常运行所必需',
            initialValue: true,
            enabled: false,
        ),
        FormiCheckbox(
            name: 'analytics',
            title: '分析',
            subtitle: '允许我们收集有关您如何使用应用程序的信息',
        ),
        OutlinedButton(
            child: Text('提交'),
            onPressed: () {
                final formiState = Formi.of(context);
                formiState.save();
                if (formiState.validate()) {
                    // 通过 formiState.value 获取表单状态
                }
            }
        ),
    ]
  ),
)

3. 添加自定义验证器

验证器是一个函数，该函数接受字段值和表单状态，并返回：

• 如果有错误，则返回一个 String
• 否则返回 null

class Validators {
  static FormiValidator<T> required<T>(BuildContext context, {String? errorText}) {
    return (value, state) {
      if (value == null ||
          (value is String && value.isEmpty) ||
          (value is Iterable && value.isEmpty) ||
          (value is Map && value.isEmpty)) {
        return errorText ?? '此字段不能为空。';
      }
      return null;
    };
  }
}

4. 创建更多符合你需要的组件

例如，提交按钮可以写成如下形式：

class FormiSubmit extends StatelessWidget {
  final Widget Function(FormiState) builder;
  FormiSubmit({required this.builder});

  [@override](/user/override)
  Widget build(BuildContext context) {
    final _formiState = Formi.of(context);
    return builder(_formiState);
  }
}

示例代码

以下是完整的示例代码：

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

class Validators {
  static FormiValidator<T> required<T>(BuildContext context, {String? errorText}) {
    return (value, state) {
      if (value == null ||
          (value is String && value.isEmpty) ||
          (value is Iterable && value.isEmpty) ||
          (value is Map && value.isEmpty)) {
        return errorText ?? '此字段不能为空。';
      }
      return null;
    };
  }
}

class FormiCheckbox extends FormiField<bool> {
  final String title;
  final String? subtitle;

  FormiCheckbox({
    required this.title,
    required String name,
    this.subtitle,
    List<FormiValidator<bool>>? validators,
    bool? initialValue,
    bool? enabled = true,
  }) : super(
          name: name,
          validators: validators,
          initialValue: initialValue,
          enabled: enabled,
          builder: (field) {
            return CheckboxListTile(
              dense: true,
              title: Text(title),
              value: field.value ?? false,
              onChanged: field.didChange,
              contentPadding: EdgeInsets.zero,
            );
          },
        );
}

class FormiSubmit extends StatelessWidget {
  final Widget Function(FormiState) builder;
  FormiSubmit({required this.builder});

  [@override](/user/override)
  Widget build(BuildContext context) {
    final _formiState = Formi.of(context);
    return builder(_formiState);
  }
}

void main() {
  runApp(
    Formi(
      child: Builder(
        builder: (context) {
          return Column(
            children: [
              Text('隐私偏好设置'),
              FormiCheckbox(
                name: 'strict',
                title: '严格必要',
                subtitle: '应用程序正常运行所必需',
                initialValue: true,
                enabled: false,
              ),
              FormiCheckbox(
                name: 'analytics',
                title: '分析',
                subtitle: '允许我们收集有关您如何使用应用程序的信息',
                validators: [Validators.required(context)],
              ),
              FormiSubmit(
                builder: (formiState) {
                  return OutlinedButton(
                    onPressed: () {
                      formiState.save();
                      if (formiState.validate()) {
                        // 通过 formiState.value 获取表单状态
                      }
                    },
                    child: Text('提交'),
                  );
                },
              )
            ],
          );
        },
      ),
    ),
  );
}