Flutter Checkbox多选数组提交POST接口仅传最后一项问题

问题现象 #

Flutter开发中实现Checkbox多选功能后，拼接参数调用POST接口时，始终仅传入最后选中的pet_healths项，无法携带全部选中的健康状态值。选中多选项时日志可正常打印所有选中项，仅选中单选项时日志输出符合预期，但请求参数组装始终异常。

问题相关代码 #

POST请求提交代码 #

Map<String, String> params = {
    'breed_id': selectedBreedID!,
    'gender': _selectedGender!,
    'weight': weightTxtCtrl.text,
    'date_of_birth': _dateController.text,
    pHfirst! : pHlast!
  };

    final response = await http.post(
      Uri.parse(
        "http://localhost:8000/api/v1/pet",
      ),
      headers: {'Authorization': 'Bearer $token'},
      body: params,
    );
}

Checkbox多选功能代码 #

String? pHfirst = "";
  String? pHlast = "";

  List<PetHealthModel> petHealths = [];
  List<PetHealthModel>customPets=[];

petHealths.isNotEmpty
? Padding(
    padding: const EdgeInsets.all(8.0),
    child: Column(
        children: petHealths.map((e) {
            var healthsID = customPets.map((e) => e.id).toList();
            return CheckboxListTile(
                title: Text(e.healthStatus),
                value: healthsID.contains(e.id),
                onChanged: (bool? value) {
                    if (value == true) {
                    setState ((){
                        customPets.add(e);
                        for (var element in customPets) {
                            pHfirst = "pet_healths["+element.id.toString()+"]";
                            pHlast = ""+element.id.toString()+",";
                            log(pHfirst!+" : "+pHlast!);
                        }
                    });
                    } else {
                    setState((){
                        customPets.remove(e);
                        for (var element in customPets) {
                            pHfirst = "pet_healths["+element.id.toString()+"]";
                            pHlast = ""+element.id.toString()+",";
                            log(pHfirst!+" : "+pHlast!);
                        }
                    });
                    }
                }
            );
        }).toList(),
    ),
),

问题根因 #

• 核心错误是使用两个单值字符串变量pHfirst、pHlast存储所有选中项的参数，每次循环遍历选中项时都会直接覆盖这两个变量的值，循环结束后变量仅保留最后一次遍历到的选中项内容，因此组装Map时只能拿到最后一项参数。
• 日志能打印全量选中项是因为循环过程中每覆盖一次变量值就打印一次日志，循环执行完成后变量已经被最后一项覆盖，不存在多组值。
• 提前在Checkbox选中回调中拼接参数的逻辑不合理，选中状态和参数组装逻辑耦合，容易出现状态不同步问题。

修复方案 #

1. 删除冗余的pHfirst、pHlast单值变量，已经通过customPets列表维护了所有选中的健康项，不需要额外用单值变量存储参数。
2. 移除CheckboxonChanged回调中循环拼接参数的冗余逻辑，仅保留选中项列表的增删操作即可。
3. 触发提交请求时，再基于customPets列表统一组装请求参数，逐个将选中项加入参数Map。

修复后代码 #

请求参数组装部分

Map<String, String> params = {
    'breed_id': selectedBreedID!,
    'gender': _selectedGender!,
    'weight': weightTxtCtrl.text,
    'date_of_birth': _dateController.text,
};
// 遍历选中项列表，逐个添加健康状态参数
for (var element in customPets) {
  params['pet_healths[${element.id}]'] = element.id.toString();
}

final response = await http.post(
  Uri.parse("http://localhost:8000/api/v1/pet"),
  headers: {'Authorization': 'Bearer $token'},
  body: params,
);

Checkbox逻辑部分

List<PetHealthModel> petHealths = [];
List<PetHealthModel> customPets=[];

petHealths.isNotEmpty
? Padding(
    padding: const EdgeInsets.all(8.0),
    child: Column(
        children: petHealths.map((e) {
            var healthsID = customPets.map((e) => e.id).toList();
            return CheckboxListTile(
                title: Text(e.healthStatus),
                value: healthsID.contains(e.id),
                onChanged: (bool? value) {
                    setState(() {
                        if (value == true) {
                          customPets.add(e);
                        } else {
                          customPets.remove(e);
                        }
                    });
                }
            );
        }).toList(),
    ),
),

适配说明 #

如果后端要求pet_healths传逗号拼接的单字符串格式（如pet_healths=3,4,5），不需要循环添加多组键值对，直接拼接id字符串即可：

params['pet_healths'] = customPets.map((e) => e.id.toString()).join(',');

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