Flutter中如何为Container加背景色与边框？解决属性冲突问题

问题根源 #

Container的color属性是BoxDecoration中color的快捷写法，当你同时设置color和decoration时，Flutter会判定为重复配置，因此抛出冲突错误。

解决步骤 #

把原本要设置的背景色移到BoxDecoration的color字段里，同时在BoxDecoration中添加border配置，移除Container单独的color属性即可。

示例代码 #

Container(
  // 不要在这里单独设置color属性
  decoration: BoxDecoration(
    color: Colors.lightBlueAccent[100], // 背景色配置在这里
    border: Border.all(
      color: Colors.blue,
      width: 2,
    ),
    // 可选：添加圆角等其他装饰
    borderRadius: BorderRadius.circular(6),
  ),
  padding: const EdgeInsets.all(12),
  child: const Text('带背景色和边框的容器'),
)

补充说明 #

所有装饰相关的配置（比如渐变背景、阴影、边框）都应该统一放在BoxDecoration中，这样既避免冲突，也能更灵活地组合多种装饰效果。

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