使用Flutter Provider包实现表单验证的最优方案及性能疑问

一、现有方案的性能损耗问题 #

你当前的实现对于简单表单场景几乎不会产生可感知的性能损耗，但确实存在可优化空间：

• 你的现有代码是整个Signup页面监听SignupValidation的所有变更，每次输入时整个Signup组件都会触发重建，但当前页面只有TextField和提交按钮两个核心元素，重建成本极低，正常使用完全不会出现卡顿。
• 只有当表单字段超过10个、页面嵌套层级很深的场景下，全页面重建才会出现可感知的性能问题。

二、基于Provider的表单验证最优实现方式 #

核心优化思路是局部刷新，只让需要变更的Widget监听对应状态的变化，避免无关节点重建，推荐以下低改造成本的优化方案：

1. 用Selector代替全局Provider.of监听 #

把TextField和提交按钮分别用Selector包裹，仅监听自己关心的状态，修改后的Widget层代码如下：

class Signup extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Signup'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: ListView(
          children: <Widget>[
            // 仅监听firstName的变化
            Selector<SignupValidation, ValidationItem>(
              selector: (ctx, service) => service.firstName,
              builder: (ctx, firstName, _) => TextField(
                decoration: InputDecoration(
                  labelText: "First Name",
                  errorText: firstName.error,
                ),
                onChanged: (String value) {
                  // 调用方法不需要监听状态，用read即可
                  context.read<SignupValidation>().changeFirstName(value);
                  // Provider版本低于4.0时替换为：
                  // Provider.of<SignupValidation>(context, listen: false).changeFirstName(value);
                },
              ),
            ),
            // 仅监听表单是否合法的状态
            Selector<SignupValidation, bool>(
              selector: (ctx, service) => service.isValid,
              builder: (ctx, isValid, _) => ElevatedButton(
                // 旧版本Flutter可继续使用RaisedButton
                child: const Text('Submit'),
                onPressed: !isValid ? null : context.read<SignupValidation>().submitData,
              ),
            )
          ],
        ),
      ),
    );
  }
}

2. 额外优化建议 #

• 表单字段较多时，可以用StateNotifier代替ChangeNotifier，配合freezed生成不可变状态，状态变更粒度更精细。
• 可把校验逻辑抽离为通用工具函数，比如长度校验、正则校验、手机号/邮箱格式校验等，不同字段直接传入对应规则即可，复用性更高。
• 不需要实时校验的场景，可以把校验逻辑放到onEditingComplete（输入框失去焦点时）或者表单提交前统一触发，进一步减少notifyListeners的调用频率。

你原本定义的ValidationItem和SignupValidation逻辑不需要做大幅修改，仅替换Widget层的监听方式即可达到最优性能，改造成本非常低。

内容的提问来源于stack exchange，提问作者Alex