如何在 flutter_svg 中使用 preCachePicture()

Question

我正在使用flutter_svg包在我的应用程序中渲染 SVG 图像，因为 Flutter 还没有正式支持 SVG。我在尝试在我的应用程序中加载 SVG 图像以及寻找我找到的解决方案时可能会延迟几秒钟我可以使用preCachePicture()预加载 SVG 图像。问题是flutter_svg官方文档没有明确说明，也没有其他网络资料展示如何使用此功能预加载SVG图像。

我正在调用loadPictures()函数initState()来预加载 SVG 图片。

String onboardImage = 'assets/images/onboard.svg';

@override
  void initState() {
    loadPictures();
    super.initState();
  }

  Future<void> loadPictures() async {
    await precachePicture(ExactAssetPicture((SvgPicture.svgStringDecoder),onboardImage), null);    
  } 

调用后preCachePicture()，当我想使用它时如何加载预缓存图像？

Answer 1

2023 更新： flutter_svg 2.0.0+1

您可能已经注意到它precachePicture已被弃用。hygehyge 提出了一个新的工作解决方案：

const loader = SvgAssetLoader('res/large_icon.svg');
svg.cache.putIfAbsent(loader.cacheKey(null), () => loader.loadBytes(null));

Answer 2

要缓存多个 SVG，请执行以下操作：

Future.wait([
  precachePicture(
    ExactAssetPicture(SvgPicture.svgStringDecoder, 'assets/my_icon.svg'),
    null,
  ),
  precachePicture(
    ExactAssetPicture(SvgPicture.svgStringDecoder, 'assets/my_asset.svg'),
    null,
  ),
  // other SVGs or images here
]);

注意：在main.dart，或在使用 SVG 的小部件之前显示的小部件中执行此操作。例如，如果您需要 svg 进行登录或注册，则可以在启动画面上进行。

Answer 3

在小部件的 initState 中调用 precache 为时已晚。你应该像这样在 main() 函数中调用这个方法：

Future<void> main() async {
    await precachePicture(ExactAssetPicture(SvgPicture.svgStringDecoder, 'assets/images/onboard.svg'), null);
    runApp(YourApp());
}