Flutter Web：如何自定义DropdownButtonFormField的MenuItem选中、悬浮等颜色？

你当前代码里的DropdownMenuThemeData仅控制下拉菜单容器的样式（比如背景、阴影），DropdownMenuItem的选中背景、hover、splash、highlight颜色需要通过配置menuItemStyle来实现，以下是两种有效解决方案：

方案一：通过Theme统一配置所有MenuItem样式 #

在包裹的Theme中扩展dropdownMenuTheme，添加menuItemStyle定义不同状态的颜色：

ButtonTheme(
  alignedDropdown: true,
  child: Theme(
    data: Theme.of(context).copyWith(
      dropdownMenuTheme: DropdownMenuThemeData(
        // 保留原有菜单容器样式配置
        menuStyle: const MenuStyle(
          surfaceTintColor: WidgetStatePropertyAll(Colors.yellow),
          backgroundColor: WidgetStatePropertyAll(Colors.blue),
          shadowColor: WidgetStatePropertyAll(Colors.red),
        ),
        // 核心：配置MenuItem的状态样式
        menuItemStyle: MenuItemButton.styleFrom(
          backgroundColor: Colors.transparent, // 默认背景色
          selectedBackgroundColor: Colors.green, // 选中状态背景色
          hoverBackgroundColor: Colors.grey.shade200, // 鼠标悬浮背景色
          splashColor: Colors.orange.withOpacity(0.3), // 点击水波纹颜色
          highlightColor: Colors.purple.withOpacity(0.2), // 点击高亮颜色
          // 可选：动态设置文字颜色
          color: WidgetStateProperty.resolveWith((states) {
            return states.contains(WidgetState.selected) ? Colors.white : Colors.black;
          }),
        ),
      ),
    ),
    child: DropdownButtonFormField(
      // 原有配置保持不变
      borderRadius: BorderRadius.circular(16),
      decoration: InputDecoration(
        enabledBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(16),
          borderSide: BorderSide.none,
        ),
        focusedBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(16),
          borderSide: BorderSide.none,
        ),
        hintText: "Select export option",
        hintStyle: context.typography.body.copyWith(
          color: context.colors.onSurfaceVariant,
        ),
        fillColor: context.colors.surfaceContainer,
        filled: true,
      ),
      dropdownColor: context.colors.surfaceContainer,
      value: null,
      style: context.typography.body.copyWith(
        color: context.colors.onSurface,
      ),
      items: const [
        DropdownMenuItem(
          value: "option",
          child: Text("Select export option"),
        ),
        DropdownMenuItem(
          value: "qr",
          child: Text("Export only QR codes"),
        ),
        DropdownMenuItem(
          value: "excel",
          child: Text("Export products list"),
        ),
      ],
      onChanged: (value) {},
    ),
  ),
)

方案二：单独给特定MenuItem设置样式 #

如果需要为个别MenuItem定制样式，直接在DropdownMenuItem中设置style属性：

DropdownMenuItem(
  value: "qr",
  style: MenuItemButton.styleFrom(
    selectedBackgroundColor: Colors.cyan,
    hoverBackgroundColor: Colors.lightBlue.shade100,
    splashColor: Colors.blue.withOpacity(0.4),
  ),
  child: Text("Export only QR codes"),
),

关键属性说明 #

• selectedBackgroundColor：MenuItem选中时的背景色
• hoverBackgroundColor：Web端鼠标悬浮时的背景色
• splashColor：点击触发的水波纹颜色
• highlightColor：点击时的高亮底色（部分主题下会被splashColor覆盖）

内容的提问来源于stack exchange，提问作者Sireen Ibnu Kabeer