flutter cache SVG image

Viewed 957

I use svg_flutter and I want to cache my SVG network in the app.

can anyone help me please how can I do that?

here is my part of the code:

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

I've just wanted to catch them.

3 Answers

I wrote a little method like:

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

This should be run before the start of the application, or before the widget is used at least. I'm using it in a provider created in runApp.

From my understanding, in the widget you would then have as normal:

SvgPicture.network(
  image_url,
);

Use this in main method

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

Use following code it worked for me.

install flutter_advanced_networkimage_2: ^2.0.1 package in pubspec.yaml

Code as give below:

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,
                );
              }
            ),
          )
Related