有没有办法自定义DropDownButtonFormField中DropDownMenuItem的颜色（Flutter Web）

Question

我想更改所选DropDownMenuItem的backgroundColor以及这些菜单项的颜色，例如hove颜色，splash颜色，突出显示颜色。

我正在 flutter web 中开发它。

我尝试将 ButtonTheme 包装到 DropdownButtonFormField 并为所有可能的颜色属性指定颜色，没有任何更改。

我也尝试过主题没有改变。

这是最终代码

ButtonTheme(
            alignedDropdown: true,
            child: Theme(
              data: Theme.of(context).copyWith(
                  dropdownMenuTheme: const DropdownMenuThemeData(
                      menuStyle: MenuStyle(
                surfaceTintColor: WidgetStatePropertyAll(Colors.yellow),
                backgroundColor: WidgetStatePropertyAll(Colors.blue),
                shadowColor: WidgetStatePropertyAll(Colors.red),
              ))),
              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,
                  focusColor: context.colors.onPrimary,
                  hoverColor: context.colors.onPrimary,
                ),
                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) {},
              ),
            ),
          ),

输出

我想更改所选颜色、悬停颜色、初始颜色和突出显示颜色

Answer 1

我正在使用 DropdownButtonFormField 在 Flutter 中设计一个下拉菜单。我的目标是为下拉菜单（DropdownMenuItem）中的每个项目自定义以下内容：

所选项目的背景颜色， 悬停在项目上时的悬停背景颜色， 交互过程中的飞溅和突出显示颜色。 但是，我无法使用 Theme 或 ButtonTheme 来实现此目的。我还尝试使用 MenuStyle 在 DropdownMenuThemeData 中定义某些属性，但它们似乎没有任何效果。

这是我当前正在使用的代码：

ButtonTheme(
  alignedDropdown: true,
  child: Theme(
    data: Theme.of(context).copyWith(
      dropdownMenuTheme: const DropdownMenuThemeData(
        menuStyle: MenuStyle(
          surfaceTintColor: WidgetStatePropertyAll(Colors.yellow),
          backgroundColor: WidgetStatePropertyAll(Colors.blue),
          shadowColor: WidgetStatePropertyAll(Colors.red),
        ),
      ),
    ),
    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",
        fillColor: Colors.grey[900],
        filled: true,
      ),
      dropdownColor: Colors.grey[800],
      value: null,
      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) {},
    ),
  ),
),