Flutter中图片作为容器背景报错的解决方法求助

这是Flutter给出的性能警告，提示图片解码尺寸远大于实际显示尺寸，造成不必要的内存浪费。以下是三种可行的解决方法：

方法一：提前压缩图片（推荐） #

直接用图片编辑工具（如Photoshop、Figma、在线压缩工具）将图片修改为警告提示中的显示尺寸（1290×600），替换原资源文件。这种方式从根源避免内存浪费，是最优解。

方法二：设置cacheWidth和cacheHeight参数 #

修改AssetImage的参数，指定解码时使用的尺寸，示例代码：

Container(
  width: 500,
  height: 200,
  decoration: BoxDecoration(
    image: DecorationImage(
      image: AssetImage(
        'lib/assets/images/home/xn.webp',
        cacheWidth: 1290,
        cacheHeight: 600,
      ),
      fit: BoxFit.cover,
    ),
  ),
),

该参数会让Flutter直接按指定尺寸解码图片，减少内存占用，数值直接使用警告中的1290和600即可。

方法三：使用ResizeImage包装 #

通过ResizeImage动态调整图片解码尺寸，适合需要根据不同设备适配的场景，示例代码：

Container(
  width: 500,
  height: 200,
  decoration: BoxDecoration(
    image: DecorationImage(
      image: ResizeImage(
        AssetImage('lib/assets/images/home/xn.webp'),
        width: 1290,
        height: 600,
      ),
      fit: BoxFit.cover,
    ),
  ),
),

错误信息翻译： #

绘画库捕获异常：
绘制图片时抛出以下信息：
图片lib/assets/images/home/xn.webp的显示尺寸为1290×600，但解码尺寸为1412×960，额外占用3028KB内存。
建议提前调整资源尺寸，设置cacheWidth参数为1290、cacheHeight参数为600，或使用ResizeImage。

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