如何解决Flutter中DropdownButton报value为null匹配项数量异常的错误

DevOps 小满

2026-10-2

报错原因

你遇到的报错如下：

There should be exactly one item with [DropdownButton]'s value: null.
Either zero or 2 or more [DropdownMenuItem]s were detected with the same value

核心触发原因有两个：

初始状态下supplier变量为null，但你生成的DropdownMenuItem列表中没有值为null的选项，无法匹配到对应项
小概率为供应商返回数据存在重复id，导致多个下拉项的value属性重复

修复步骤

第一步：明确变量类型，避免类型不匹配
将原变量定义修改为：

String? supplier; // 和下拉项value的字符串类型对齐，声明为可空字符串
List _supplierDetails = [];

第二步：适配初始空值，二选一即可

方案1：新增加载判断，数据未拉取完成时显示占位

// 数据为空时显示加载动画，避免空下拉列表报错
_supplierDetails.isEmpty ? const CircularProgressIndicator() : DropdownButton(
  hint: const Text('Select Supplier'),
  items: _supplierDetails.map((list) {
    return DropdownMenuItem(
      child: Text(list['Name']),
      value: list['id'].toString(),
    );
  }).toList(),
  onChanged: (value) {
    setState(() {
      supplier = value as String?;
    });
  },
  value: supplier,
)

方案2：新增默认空选项，适配初始null值

如果不需要加载占位，可以直接在下拉项列表中新增一个值为null的默认选项：

DropdownButton(
  hint: const Text('Select Supplier'),
  items: [
    // 新增默认选项，值与初始的supplier空值匹配
    const DropdownMenuItem(
      value: null,
      child: Text('Select Supplier'),
    ),
    // 展开原有供应商选项
    ..._supplierDetails.map((list) {
      return DropdownMenuItem(
        child: Text(list['Name']),
        value: list['id'].toString(),
      );
    }).toList()
  ],
  onChanged: (value) {
    setState(() {
      supplier = value as String?;
    });
  },
  value: supplier,
)