Flutter CachedNetworkImage doesn't work, loading images again when scrolling up to bottom or bottom to up

Question

I'm trying to work with cached images. I followed CachedNetworkImage but it doesn't work. Please help me if any other solution available in flutter

Here is video of my issue

When I scrolled list from up to bottom or bottom to up the images are gone and reloaded again

Code

        ClipRRect(
                  borderRadius: new BorderRadius.only(
                  topRight: Radius.circular(10.0),
                  topLeft: Radius.circular(10.0)),
                  child: CachedNetworkImage(
                       placeholder: (context, url) => Center(
                           child: CircularProgressIndicator(),),
                            imageUrl: productList[position]["images"]
                            ["post_image1"],
                            height: 180,
                            width: MediaQuery.of(context).size.width,
                            fit: BoxFit.cover,
                    ))

I have read somewhere that this plugin is not so effective right now. — Ropali Munshi, Sep 24 '19 at 04:47

score 0 · Accepted Answer · answered Sep 24 '19 at 07:59

CachedNetworkImage works fine for me.

Run your app on a simulator / emulator then you can see if the images have been cached. Note that the image size makes a big difference (you don’t want them more than 100K and hopefully < 50K) as even if they are cached, each time they have to be re shown in the UI they have to be decoded. Looking at your video it looks like it takes a long time for the to load initially (which is either a slow internet or large files), then once they are loaded, then you still get the decode time (but that is a lot shorter than the initial download time).

In summary, make sure the images are of a sensible size for use in a mobile app.

Flutter CachedNetworkImage doesn't work, loading images again when scrolling up to bottom or bottom to up

1 Answers1