Flutter DropdownButton选中选项后如何显示不在列表中的自定义值？

Flutter官方的DropdownButton组件有强制约束：绑定的value值必须在items配置的选项值列表中存在且唯一，你直接将选中值修改为选项列表外的内容，就会触发你遇到的断言报错。

这个属性是官方提供专门用来自定义组件收起时展示的内容的，不需要修改真实的选中值，完全符合你的需求，示例代码如下：

// 定义选中值，真实值保持在选项列表范围内
String dropdownValue = 'Value 1';

// 组件代码
DropdownButton<String>(
  value: dropdownValue,
  items: <String>[
    'Value 1',
    'Value 2',
  ].map<DropdownMenuItem<String>>((String value) {
    return DropdownMenuItem<String>(
      value: value,
      child: Text(value),
    );
  }).toList(),
  // 自定义选中后收起态的展示内容
  selectedItemBuilder: (BuildContext context) {
    return <String>[
      'Value 1',
      'Value 2',
    ].map<Widget>((String value) {
      if (value == 'Value 2') {
        // 选中Value 2时展示自定义内容
        return const Text('Value Not in list of items');
      }
      return Text(value);
    }).toList();
  },
  onChanged: (String? newValue) {
    setState(() {
      // 直接赋值即可，不需要修改真实值
      dropdownValue = newValue!;
    });
  },
),

该方案优势：

• 完全符合官方组件的约束，不会触发任何报错
• 真实存储的选中值依旧是正常的Value 2，不影响后续的业务逻辑判断
• 仅修改展示层逻辑，代码可维护性更高

如果你确实需要将选中的真实值修改为列表外的内容，可以将自定义值添加到选项列表中，但是将对应的下拉项设置为不可见，示例如下：

String dropdownValue = 'Value 1';

DropdownButton<String>(
  value: dropdownValue,
  items: <String>[
    'Value 1',
    'Value 2',
    'Value Not in list of items', // 新增自定义值到选项列表
  ].map<DropdownMenuItem<String>>((String value) {
    return DropdownMenuItem<String>(
      value: value,
      // 自定义值对应的下拉项设置为不可见，下拉时不会显示
      child: value == 'Value Not in list of items' ? const SizedBox.shrink() : Text(value),
    );
  }).toList(),
  onChanged: (String? newValue) {
    setState(() {
      dropdownValue = newValue!;
      if (dropdownValue == 'Value 2') {
        dropdownValue = 'Value Not in list of items';
      }
    });
  },
),

注意该方案会修改真实的选中值，如果你的业务逻辑需要判断是否选中了Value 2，需要对应调整判断条件。

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