Flutter FormBuilderField取值异常、校验器不生效问题修复

两个问题的核心原因是：点击选择NGO时，你仅更新了组件内部状态做UI高亮，没有调用FormBuilderField的didChange方法将选中值同步到表单体系，导致表单无法获取字段值、校验逻辑无触发依据。此外代码中validator配置被注释，本身不会生效，且字段泛型定义与单选场景不匹配。

具体修复步骤 #

• 修正字段泛型：你是单选NGO，不需要用List包裹值，将FormBuilderField和对应FormFieldState的泛型从List<MapEntry<int, NgoDetails>>改为MapEntry<int, NgoDetails>
• 选中时同步表单值：在NGO卡片的onTap回调中，调用field.didChange(选中的NGO条目)，把选中值同步给表单
• 替换选中判断逻辑：去掉自行维护的selectedName冗余状态，直接通过field.value判断当前选中项做UI高亮渲染，避免多套状态不一致
• 放开validator的注释，让校验逻辑正常注册到表单字段
• 删除全局theField变量，直接使用builder回调内提供的field实例操作，避免持有旧状态引用引发异常

关键代码修改示例 #

1. 修正泛型与选中逻辑 #

// 原错误泛型为List包裹的类型，替换为单值泛型
return FormBuilderField<MapEntry<int, NgoDetails>>(
  name: 'ngoId',
  decoration: const InputDecoration(
    enabledBorder: OutlineInputBorder(borderSide: BorderSide(color: MyTheme.primary)),
    border: OutlineInputBorder(),
    filled: true,
    fillColor: Color(0xAFBFDCFF),
    hintText: "Please select your NGO",
  ),
  builder: (FormFieldState<MapEntry<int, NgoDetails>> field) {
    // 删除 theField = field 全局赋值逻辑
    return SizedBox(
      height: 300,
      child: ListView.builder(
        shrinkWrap: true,
        padding: const EdgeInsets.symmetric(),
        physics: const AlwaysScrollableScrollPhysics(),
        scrollDirection: Axis.horizontal,
        itemCount: ngosList.length,
        itemBuilder: (BuildContext context, int index) {
          final currentNgo = ngosList[index];
          String ngoName = currentNgo.value.name;
          String ngoLogo = currentNgo.value.logo;
          return AnimatedBuilder(
              animation: _controller!,
              builder: (BuildContext context, _) {
                return Padding(
                  padding: const EdgeInsets.fromLTRB(10, 17, 10, 17),
                  child: GestureDetector(
                    key: Key('$index'),
                    onTap: () {
                      // 核心：选中时将值同步到表单
                      field.didChange(currentNgo);
                      if (isSelected) {
                        _controller!.reverse();
                        _sizeController!.reverse().then(
                          (value) {
                            _controller!.forward();
                            _sizeController!.forward();
                            return null;
                          },
                        );
                      } else {
                        _controller!.forward();
                        _sizeController!.forward();
                      }
                    },
                    // 替换原来的selectedName == ngoName判断逻辑
                    child: field.value?.key == currentNgo.key
                    // ... 其余选中/未选中的UI渲染代码保持不变

2. 放开校验配置 #

// 去掉原代码的注释，正常注册校验规则
validator: FormBuilderValidators.compose([
  FormBuilderValidators.required(errorText: "Please select your NGO".tr()),
]),

修改完成后，提交表单时即可通过表单实例的value['ngoId']获取到选中的NGO条目，取其key值就是需要上传的NGO ID，必填校验也会在触发表单校验时正常响应。

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