Flutter缓存SVG图像。

Question

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

请问有人可以帮我吗？我该如何实现它呢？

以下是我的部分代码：

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

我只是想抓住它们。

- user17838882

---

请查看precachePicture。 - pskink

@pskink 我看到了，但我不确定如何在小部件中使用它。你能帮助我吗？ - user17838882

这是文档中的描述：“返回一个Future，该Future将在PictureProvider生成的第一张可用或加载失败的图像可用时完成。如果稍后使用SvgPicture使用该图像，则可能会更快地加载。图像的使用者不需要使用相同的PictureProvider实例。只要两个图片共享相同的键，PictureCache就可以找到该图片。” - pskink

Answer 1

我写了一个小方法如下：

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

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

据我理解，在小部件中，您将像平常一样：

SvgPicture.network(
  image_url,
);

- jacomago

Answer 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(
                  'placeholder or error image',
                  fit: BoxFit.scaleDown,
                  width: 24,
                  height: 24,
                  color: Colors.red,
                );
              }
            ),
          )

- Altaf Razzaque

---

我该如何添加占位符？ - Safiul islam

Answer 3

在主方法中使用此代码

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

- Kaushik Chandru

---

如何使用它来制作小部件？ - user17838882

我想在我的课堂上使用它。 我想要使用它们。 - user17838882

“以及如何在小部件中使用它？”@user17838882 - 我发布了文档中的内容：“如果该图像随后被SvgPicture使用，它可能会加载得更快”。 - pskink

正如@pskink所说，预缓存并在build方法中使用SvgPicture，Flutter会自动查找缓存文件并在可用时使用它。 - Kaushik Chandru

Answer 4

你可以尝试使用flutter_img包。这里有一个演示示例，它会在你重新运行应用之前缓存这个图片。

Img(
          'https://raw.githubusercontent.com/shafi-org/portfolio/master/src/assets/flutter-svgrepo-com.svg',
          width: 300,
          height: 300,
        ),

- Safiul islam