Flutter DropdownButton如何设置初始空值并保证选择后正常显示

问题现象 #

需要实现下拉选择器效果：初始状态不展示任何选中值，仅用户主动选择某一选项后，才展示对应选中内容。
尝试注释DropdownButton组件的value: _selected属性后，初始空态可以正常显示，但触发onChanged回调后，选中值始终无法正常填充展示。
原有问题代码：

FormField<Device>(
  initialValue: _selected,
  builder: (field) {
    return InputDecorator(
      decoration: InputDecoration(
        labelText: widget.labelText,
        border: const OutlineInputBorder(),
      ),
      child: DropdownButtonHideUnderline(
        child: DropdownButton<Device>(
          value: _selected,
          isDense: true,
          isExpanded: true,
          items: widget.list
              .map<DropdownMenuItem<Device>>((Device value) {
            return DropdownMenuItem<Device>(
              value: value,
              child: Text('${value.inventarnr} - ID: ${value.id}'),
            );
          }).toList(),
          onChanged: (value) {
            setState(() {
              _selected = value;
            });
          },
        ),
      ),
    );
  },
),

问题原因 #

DropdownButton判断是否显示空态的逻辑是：当传入的value为null时，自动展示无选中的空状态。直接移除value属性绑定后，组件不会和状态变量_selected做关联，状态更新时组件不会触发重绘，所以选中后无法展示内容。

修复方案 #

不要移除value: _selected的绑定，只需要把_selected的初始值设置为null即可：

• 状态变量声明时不要给_selected赋默认Device实例，初始值设为null

  Device? _selected; // 可空类型，默认初始值为null
  

• 保留DropdownButton上的value: _selected配置，不需要注释这行
• 如果需要表单校验，补充FormField的校验逻辑即可，比如：

  validator: (value) {
    if (value == null) return '请选择设备';
    return null;
  },
  

修复后运行效果：初始进入页面时下拉框显示空态，用户选择选项后会正常展示选中的内容，完全符合需求。

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