Flutter中如何在precacheImage中使用SVG资源？

Flutter自带的precacheImage默认只支持光栅图类型的ImageProvider（比如AssetImage、NetworkImage），而SVG是矢量格式，AssetImage无法正确解析SVG内容，所以你用precacheImage+AssetImage加载SVG完全起不到缓存效果。下面提供两种可行的解决方案：

方案1：用flutter_svg自带的缓存机制预加载 #

如果你使用的是flutter_svg包，它本身提供了内置缓存能力，直接预加载SVG字节数据到内存即可，不用依赖precacheImage：

import 'package:flutter_svg/flutter_svg.dart';

static void precacheMeasures(BuildContext context) async {
  for (final category in MeasureCategoriesEnum.values) {
    final measures = categories[category]!;
    for (final measure in measures) {
      final caption = TypeHelpers.getEnumCaption(measure);
      final categoryPath = TypeHelpers.getEnumCaption(category);
      final svgPath = 'Resources/Images/Measures/$categoryPath/$caption.svg';
      
      // 直接将SVG资源预加载并缓存到flutter_svg的全局缓存中
      await svg.cache.putIfAbsent(
        svgPath,
        () => SvgAssetLoader(svgPath).loadBytes(),
      );
    }
  }
}

后续使用SvgPicture.asset加载对应SVG时，会直接从缓存读取数据，无需重复解析。

方案2：自定义SvgImageProvider适配precacheImage #

如果必须使用precacheImage方法，可以自定义一个支持SVG解析的ImageProvider，让precacheImage能识别并处理SVG：

第一步：创建自定义ImageProvider #

import 'package:flutter/widgets.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:flutter_svg/src/picture_provider.dart';
import 'package:flutter_svg/src/vector_graphics.dart' as vg;

class SvgAssetImage extends ImageProvider<SvgAssetImage> {
  final String assetName;
  final String? package;
  final AssetBundle? bundle;

  const SvgAssetImage(
    this.assetName, {
    this.package,
    this.bundle,
  });

  @override
  Future<SvgAssetImage> obtainKey(ImageConfiguration configuration) {
    return SynchronousFuture(this);
  }

  @override
  ImageStreamCompleter loadImage(SvgAssetImage key, ImageDecoderCallback decode) {
    return OneFrameImageStreamCompleter(
      () async {
        // 用flutter_svg的加载器读取SVG字节
        final loader = SvgAssetLoader(
          key.assetName,
          package: key.package,
          bundle: key.bundle,
        );
        final bytes = await loader.loadBytes();
        // 将SVG解析为Picture，再转为Image对象
        final picture = await vg.loadPicture(loader, null);
        final image = await picture.toImage(100, 100); // 可根据需求调整默认宽高
        return ImageInfo(image: image);
      },
    );
  }

  @override
  bool operator ==(Object other) =>
      identical(this, other) ||
      other is SvgAssetImage &&
          runtimeType == other.runtimeType &&
          assetName == other.assetName &&
          package == other.package;

  @override
  int get hashCode => assetName.hashCode ^ package.hashCode;
}

第二步：修改预缓存代码 #

static void precacheMeasures(BuildContext context) async {
  for (final category in MeasureCategoriesEnum.values) {
    final measures = categories[category]!;
    for (final measure in measures) {
      final caption = TypeHelpers.getEnumCaption(measure);
      final categoryPath = TypeHelpers.getEnumCaption(category);
      final svgPath = 'Resources/Images/Measures/$categoryPath/$caption.svg';
      
      // 使用自定义的SvgAssetImage进行缓存
      await precacheImage(SvgAssetImage(svgPath), context);
    }
  }
}

额外注意事项 #

• 确保已在pubspec.yaml中正确配置SVG资源路径：

flutter:
  assets:
    - Resources/Images/Measures/

• 方案1是flutter_svg官方推荐的缓存方式，实现更简洁；方案2适合必须依赖precacheImageAPI的场景。

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