颤振缓存SVG图像答案

【问题标题】：flutter cache SVG image颤振缓存SVG图像
【发布时间】：2022-06-17 17:35:36
【问题描述】：

我使用 svg_flutter，我想在应用中缓存我的 SVG 网络。

谁能帮帮我，请问我该怎么做？

这是我的部分代码：

 SvgPicture.network(data[index]["Cat_Image"]),

我只是想抓住他们。

【问题讨论】：

见precachePicture
@pskink 我看到了，但我对如何将它用于小部件感到困惑。你能帮帮我吗？
这就是他们在文档中所说的：“返回一个 Future，当 PictureProvider 产生的第一张图像可用或无法加载时，该 Future 将完成。如果图像稍后被SvgPicture，它可能会加载更快。图像的消费者不需要使用相同的PictureProvider实例。只要两张图片共享相同的key，PictureCache就会找到图片。"

标签： flutter image dart svg caching

【解决方案1】：

在main方法中使用这个

    await precachePicture(ExactAssetPicture(SvgPicture.svgStringDecoderBuilder, 'assets/images/yourSvg.svg'), null);

【讨论】：

以及如何将它用于小部件？
我想在我的课堂上使用它我想使用它们
“以及如何将它用于小部件？” @user17838882 - 我发布了文档所说的内容：“如果图像稍后使用通过SvgPicture，它可能会被加载更快"
正如@pskink所说，预先缓存它并在构建方法中使用SvgPicture，如果可用的话，flutter会自动找到缓存文件并使用它。

【解决方案2】：

使用下面对我有用的代码。

在 pubspec.yaml 中安装 flutter_advanced_networkimage_2: ^2.0.1 包

代码如下：

SvgPicture(
            AdvancedNetworkSvg(
              'YOUR IMAGE URL',
              useDiskCache: true,
                  (theme) => (bytes, colorFilter, key) {
                return svg.svgPictureDecoder(
                  bytes ?? Uint8List.fromList(const []),
                  false,
                  colorFilter,
                  key,
                  theme: const SvgTheme(currentColor: Colors.green, xHeight: 20),
                );
              },
              loadFailedCallback: (){
                return SvgPicture.asset(
                  'plaseholder or error image',
                  fit: BoxFit.scaleDown,
                  width: 24,
                  height: 24,
                  color: Colors.red,
                );
              }
            ),
          )

【讨论】：

【解决方案3】：

我写了一个小方法，比如：

Future<void> _precache() async {
    for (String imageUrl in _urls) {
      await precachePicture(
        NetworkPicture(
          SvgPicture.svgByteDecoderBuilder,
          imageUrl,
        ),
        null,
      );
    }
  }

这应该在应用程序启动之前运行，或者至少在使用小部件之前运行。我在 runApp 中创建的提供程序中使用它。

据我了解，在小部件中，您将照常拥有：

SvgPicture.network(
  image_url,
);

【讨论】：