Flutter中为何无法同时设置Container的color与decoration属性？

问题原因 #

Flutter 里 Container 的 color 属性是 decoration: BoxDecoration(color: color) 的语法糖，和 decoration 内的 color 功能完全重复。同时设置这两个属性会造成背景色定义冲突，因此编译器会直接报错。

解决方案 #

根据你想要的视觉效果，有两种常用处理方式：

方式1：仅保留 decoration 内的颜色

如果不需要两层背景色，直接移除 Container 的 color 属性，通过 BoxDecoration 统一定义颜色和样式：

Container(
  width: 110,
  height: 110,
  decoration: BoxDecoration(
    color: appColor, // 自定义背景色
    border: Border.all(width: 8),
    borderRadius: BorderRadius.circular(90),
  ),
),

方式2：嵌套 Container 实现两层背景色

如果需要同时显示两种颜色（比如底层红色、上层带边框的自定义色），可以通过嵌套两个 Container 实现：

Container(
  width: 110,
  height: 110,
  color: Colors.red, // 底层颜色
  child: Container(
    margin: const EdgeInsets.all(8), // 间距与外层边框宽度一致
    decoration: BoxDecoration(
      color: appColor, // 上层自定义颜色
      borderRadius: BorderRadius.circular(47), // 内层宽高为110-16=94，圆角半径取47
    ),
  ),
),

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