Flutter中如何修改DropdownButton选中选项的颜色？

核心原因说明 #

DropdownButton 本身没有对外暴露直接配置下拉选中项背景色的参数，且组件内部渲染逻辑不会读取全局ThemeData.selectedRowColor属性，也不会响应全局配置的highlightColor，这也是你之前修改主题配置完全没有生效的根本原因。

可行实现方式 #

方式1：局部覆盖主题配置（改动最小） #

DropdownButton 弹出的下拉菜单会继承组件所在位置最近的Theme节点属性，你只需要在DropdownButton外层包裹一层自定义的Theme，就能定向修改选中项的颜色，不会影响全局组件的主题样式：

body: Center(
  child: Theme(
    data: Theme.of(context).copyWith(
      // 关闭默认的水波纹效果，避免盖住设置的选中色
      splashColor: Colors.transparent,
      highlightColor: Colors.transparent,
      // 下拉菜单选中项实际读取的颜色配置
      selectedRowColor: Colors.red.shade100,
    ),
    child: DropdownButton(
      hint: const Text('Please choose an option'),
      value: selectedOption,
      onChanged: (String newValue) {
        setState(() {
          selectedOption = newValue;
        });
      },
      items: options.map((option) {
        return DropdownMenuItem(
          child: Text(option),
          value: option,
        );
      }).toList(),
    ),
  ),
),

方式2：自定义DropdownMenuItem样式（灵活性最高） #

如果需要完全自定义选中项的样式（比如圆角、阴影、文字变色等），可以在生成每个菜单项的时候，手动判断当前选项是否为选中态，叠加对应的样式，不受默认主题逻辑的限制：

items: options.map((option) {
  final isSelected = option == selectedOption;
  return DropdownMenuItem(
    value: option,
    child: Container(
      // 根据选中态设置不同背景
      color: isSelected ? Colors.red.shade100 : Colors.transparent,
      padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 12),
      // 也可以同步修改选中项的文字样式
      child: Text(
        option,
        style: TextStyle(
          color: isSelected ? Colors.red : Colors.black87,
          fontWeight: isSelected ? FontWeight.w600 : FontWeight.normal,
        ),
      ),
    ),
  );
}).toList()

注意事项 #

Flutter 3.16之后默认开启Material3设计规范，此时DropdownButton的选中态默认会使用colorScheme.primaryContainer的半透明效果渲染，这种场景下方式1的主题覆盖可能会出现颜色叠加，建议优先使用方式2的自定义菜单项方案，样式可控性更强。

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