Flutter：如何修改DropdownButton的背景色与圆角？

你之前通过Theme设置canvasColor仅改变了下拉列表的背景，这是因为该属性仅作用于下拉菜单的画布区域，按钮本身的样式需要单独配置。以下是两种可行的解决方案：

方案一：直接使用DropdownButton内置样式属性 #

通过buttonStyleData直接定制按钮的背景色和圆角，搭配style设置文本样式：

DropdownButton(
  items: const [DropdownMenuItem(child: Text('one'))],
  onChanged: (newValue) {},
  // 设置按钮文本颜色
  style: const TextStyle(color: Colors.white),
  // 定制按钮外观
  buttonStyleData: ButtonStyleData(
    backgroundColor: MaterialStateProperty.all(Colors.blue),
    shape: MaterialStateProperty.all(
      RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(8),
      ),
    ),
  ),
)

方案二：用Container包裹实现自定义背景 #

如果需要更灵活的装饰（比如边框、阴影），可以用Container包裹DropdownButton，同时移除默认下划线并让按钮适配容器宽度：

Container(
  padding: const EdgeInsets.symmetric(horizontal: 16),
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(8),
    // 可选：添加边框或阴影
    // border: Border.all(color: Colors.grey),
    // boxShadow: [BoxShadow(color: Colors.black12, blurRadius: 4)],
  ),
  child: DropdownButton(
    items: const [DropdownMenuItem(child: Text('one'))],
    onChanged: (newValue) {},
    style: const TextStyle(color: Colors.white),
    underline: const SizedBox(), // 移除默认下划线
    isExpanded: true, // 让按钮占满容器宽度
  ),
)

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