Flutter：DropDownField列表映射报错，期望List类型却获List<DropdownMenuItem>

问题背景 #

我创建了包含type和s_id字段的列表，该列表在DropdownButtonFormField()中可正常工作，但在DropDownField()中运行时，列表能正常显示，但点击下拉按钮会抛出类型不匹配错误：

Expected a value of type 'List', but got one of type 'List'

相关代码如下：

State类代码 #

class _serv_detailsState extends State<serv_details> {
 List dropList =[
   {"s_id":0, "type": "<Select>"},
  ];
  var fkey=GlobalKey<FormState>();
 var val=true;
  var dropdownValue = "";
 late TextEditingController details,type,fee;
  void gendrop() async {
  String url = login.url+"subscription/su/";
  var resp = await get(url);
  print(resp.body);
  setState(() {
  dropList = jsonDecode(resp.body);
  });
  }
 @override
 void initState() {
 details=TextEditingController();
 type=TextEditingController();
 fee=TextEditingController();
 super.initState();
 gendrop();
 }

Scaffold中DropDownField的使用代码 #

Container(
              child: DropDownField(
                controller: type,
                hintText: "select the type",
                enabled: true,
                onValueChanged: (value){
                  setState(() {
                    dropdownValue = value.toString();
                        print(dropdownValue);

                          });

                },

                items: dropList.map((item) => DropdownMenuItem(child: Text(item['type'].toString()),value:item['s_id'].toString(),)).toList()


              )
            ),

解决方案 #

错误核心是DropDownField与DropdownButtonFormField的items参数要求不同：

• DropdownButtonFormField需要传入List<DropdownMenuItem>
• DropDownField（第三方包组件）需要传入原始数据列表，而非DropdownMenuItem列表，它通过专属参数来构建选项UI。

修改后的代码如下：

Container(
  child: DropDownField(
    controller: type,
    hintText: "select the type",
    enabled: true,
    onValueChanged: (value){
      setState(() {
        // 直接从选中的原始数据中取s_id
        dropdownValue = value['s_id'].toString();
        print(dropdownValue);
      });
    },
    // 直接传入原始的dropList，无需转换为DropdownMenuItem
    items: dropList,
    // 自定义下拉选项的显示内容
    dropDownItemBuilder: (context, item) {
      return Text(item['type'].toString());
    },
    // 可选：如果组件支持，直接指定字段名更简洁
    // valueField: 's_id',
    // labelField: 'type',
  ),
),

说明 #

1. 移除map转换DropdownMenuItem的逻辑，直接将dropList赋值给items
2. 通过dropDownItemBuilder定义每个下拉选项的显示文本
3. onValueChanged的回调参数会返回选中的原始数据项，直接从中提取s_id即可

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