Flutter中如何修改DropdownButton点击时的水波纹颜色？

你设置focusColor没用是因为这个属性控制的是组件获取焦点时的颜色，不是点击触发的水波纹效果。要修改DropdownButton的点击水波纹，得通过Theme包裹组件来实现，因为DropdownButton本身没有直接暴露splashColor的配置项。

解决方法：用Theme包裹DropdownButton #

通过自定义ThemeData的splashColor（水波纹颜色）和highlightColor（点击高亮颜色），覆盖默认的Material主题样式，就能实现自定义水波纹效果。

修改后的完整代码示例：

Container(
  height: 20,
  padding: EdgeInsets.only(right: 10, left: 10),
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(38),
    border: Border.all(color: Color(0xFFEAD6EE)),
  ),
  child: Theme(
    data: ThemeData(
      splashColor: Color(0xFFC88FFF), // 水波纹颜色
      highlightColor: Color(0xFFC88FFF).withOpacity(0.3), // 点击时的高亮颜色（可选）
    ),
    child: DropdownButton(
      style: TextStyle(
        fontSize: 16,
        color: fontColor.withOpacity(0.5),
        fontWeight: FontWeight.normal,
      ),
      isExpanded: true,
      hint: Text('$editedCountry'),
      items: dropdownMenuItemByCategory('Country'),
      onChanged: (editedIndValue) {
        _onCountrySelected(editedIndValue);
      },
      value: editedCountryID,
      underline: SizedBox(),
    ),
  ),
)

补充说明 #

• 如果你的项目使用的是Material3，可以通过ColorScheme来配置：

  Theme(
    data: ThemeData.from(colorScheme: ColorScheme.light(
      primary: Color(0xFFC88FFF),
      onPrimary: Colors.white,
    )).copyWith(
      splashColor: Color(0xFFC88FFF),
    ),
    child: DropdownButton(...),
  )
  

• 若需要移除水波纹效果，可将splashColor设为Colors.transparent。

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