Flutter中Container背景图叠加白色背景，如何去除多余白色区域？

你遇到的问题是因为同时设置了BoxDecoration的color和image，当背景图片没有完全覆盖Container区域时，白色背景就会从空隙中透出来。给你几个可行的解决办法：

• 直接移除背景色设置：如果你的背景图本身不透明且能完全覆盖Container，直接删掉color: Colors.white这一行即可，避免白色区域外露。修改后的代码：

Container(
  height: 60,
  clipBehavior: Clip.hardEdge,
  decoration: BoxDecoration(
    image: DecorationImage(
      image: AssetImage('assets/images/ok_button_bg.png'),
      fit: BoxFit.fill,
    ),
  ),
);

• 调整图片适配方式：如果需要保留背景色作为图片加载前的占位，可将BoxFit.fill替换为BoxFit.cover，它会保证图片按比例缩放并填满整个Container，不会留下空隙：

Container(
  height: 60,
  clipBehavior: Clip.hardEdge,
  decoration: BoxDecoration(
    color: Colors.white,
    image: DecorationImage(
      image: AssetImage('assets/images/ok_button_bg.png'),
      fit: BoxFit.cover,
    ),
  ),
);

• 检查图片本身尺寸：如果上面两种方法都无效，大概率是图片尺寸比例和Container的60高度不匹配，导致缩放后无法完全覆盖。可以修改图片尺寸，让它和Container的宽高比例一致，或者直接制作与Container尺寸完全匹配的图片。

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