flutter - 如何在flutter_svg中使用preCachePicture()

Question

我正在使用flutter_svg包在我的应用程序中渲染SVG图像，因为flutter尚未正式支持SVG。尝试将SVG图像加载到我的应用程序中以及寻找解决方案时，我可能要延迟几秒钟我可以使用preCachePicture()预加载SVG图像。问题在于官方flutter_svg文档没有明确说明，也没有其他Web Material 显示如何使用此功能预加载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);    
  } 

After calling preCachePicture(), How to load the precached image when I wanted to use it ?

Answer 1

要缓存多个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进行登录或注册，则可以在启动屏幕上进行操作。