Flutter图片加载优化，自动缓存大小

Flutter图片加载优化：解决大图内存问题

在移动应用开发中，图片加载是一个常见但容易出问题的环节。我们在开发安卓APP时，使用Glide加载图片，它会默认按照view的尺寸进行图片缓存。但是在Flutter中，默认缓存使用的是图片原始大小。这会导致图片加载过程中占用内存比较大。如果你在iOS设备上加载一个图片列表，每张图片在2M左右时，应用可能会崩溃。

问题现象

在Flutter开发过程中，我们经常使用各种类型的图片加载。当你加载一张尺寸比较大(9248x6944)的图片时，会发现图片加载很慢，即使它是本地图片。

dart 复制代码

Image.asset(
  Assets.imgBig,
  width: 200,
  height: 200,
),

这时打开debugInvertOversizedImages = true;这个配置，可以看到图片会颜色反转同时倒置，同时日志会提示图片过载。

dart 复制代码

======== Exception caught by painting library ======================================================
The following message was thrown while painting an image:
Image assets/img/big.jpg has a display size of 525×525 but a decode size of 6151×8192, which uses an additional 261007KB.

Consider resizing the asset ahead of time, supplying a cacheWidth parameter of 525, a cacheHeight parameter of 525, or using a ResizeImage.
====================================================================================================

解决方案

使用ResizeImage

根据提示，我们可以使用cacheWidth, cacheHeight或ResizeImage。查看源码发现，当设置了cacheWidth或cacheHeight时，本质是使用ResizeImage包裹ImageProvider。

dart 复制代码

Image.asset(
  String name, {
}) : image = ResizeImage.resizeIfNeeded(
       cacheWidth,
       cacheHeight,
       scale != null
         ? ExactAssetImage(name, bundle: bundle, scale: scale, package: package)
         : AssetImage(name, bundle: bundle, package: package),
     ),

自定义AutoResizeImage

我们自定义一个AutoResizeImage来代替系统的ResizeImage，支持在图片不过载的前提下，满足图片的清晰度，同时支持清晰度调节。主要逻辑就是根据控件尺寸，调整图片解码尺寸。

dart 复制代码

@override
ImageStreamCompleter loadBuffer(AutoResizeImageKey key, DecoderBufferCallback decode) {
  Future<Codec> decodeResize(ImmutableBuffer buffer, {int? cacheWidth, int? cacheHeight, bool? allowUpscaling}) async {
    final ImageDescriptor descriptor = await ImageDescriptor.encoded(buffer);
    Size resize = _resize(descriptor);
    return descriptor.instantiateCodec(
      targetWidth: resize.width.round(),
      targetHeight: resize.height.round(),
    );
  }

  final ImageStreamCompleter completer = imageProvider.loadBuffer(key._providerCacheKey, decodeResize);
  if (!kReleaseMode) {
    completer.debugLabel = '${completer.debugLabel} - Resized(${key._width}×${key._height})';
  }
  _configureErrorListener(completer, key);
  return completer;
}

iOS开发辅助工具

在进行Flutter开发时，特别是针对iOS平台的优化，使用专业的工具可以事半功倍。AppUploader作为一款专业的iOS开发助手，可以帮助开发者更高效地管理应用打包、上传和测试流程。它支持批量处理图片资源，自动优化图片大小，与本文提到的图片加载优化方案完美配合，能显著提升应用性能并减少内存占用。

使用建议

对于网络图片，建议使用CachedNetworkImage配合AutoResizeImage
对于本地资源图片，可以直接使用AutoResizeImage包裹AssetImage
在列表等需要加载多张图片的场景，务必使用尺寸优化方案
开发阶段保持debugInvertOversizedImages = true以便及时发现图片过载问题