12

I am making a wallpaper application in which it displays many HD images from a list in a GridView.builder (around 90 HD images) and the images are not getting cached. They reload every time when I scroll up and down. I tried using the normal network image and even CachedNetworkImage but same result. Any solution?

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text("Fetch Data JSON"),),
        body: isLoading? Container(
            alignment: new Alignment(0, 0),
            child: CircularProgressIndicator(),
            decoration: new BoxDecoration(color: Color.fromARGB(230, 0, 0, 0)),)
            :
            Container(
            decoration: new BoxDecoration(color: Color.fromARGB(230, 0, 0, 0)),  
            child: new GridView.builder(
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 1,childAspectRatio:3),
              itemCount: list.length,
              padding: EdgeInsets.all(0.0),
              itemBuilder: (BuildContext context, int index) {
                final cacheimg = CachedNetworkImage(
                      imageUrl: list[index].imgcollectionsrcimage.toString(),
                      placeholder: new CircularProgressIndicator(),
                      errorWidget: new Icon(Icons.error, color: Colors.white,),
                      );

                return Stack(
                  children: <Widget>[


                    //new Image.network(list[index].imgcollectionsrcimage.toString())
/*
                    new CachedNetworkImage(
                      imageUrl: imgsrc1[index],
                      placeholder: new CircularProgressIndicator(),
                      errorWidget: new Icon(Icons.error, color: Colors.white,),
                      ),
*/

                    ////////////////////////////////////////////srcimage/////////////////////////////////////////////////
                    new GestureDetector(
                      //onTap: (){_gotoImageCollections(list[index].hreflink.toString());},

                      child: new Container (
                      child: Container(

                        decoration: BoxDecoration(
                        borderRadius: new BorderRadius.all(Radius.circular(5)),

                        image: DecorationImage(
                            //colorFilter: const ColorFilter.mode(const Color.fromARGB(150, 0, 0, 0), BlendMode.darken),
                            image: NetworkImage(list[index].imgcollectionsrcimage.toString()),
                            fit: BoxFit.cover,

                            ),

                        boxShadow: <BoxShadow>[new BoxShadow(color: const Color.fromARGB(150, 0, 0, 0),offset: new Offset(0.0, 3.0),blurRadius: 5.0)]
                            ),
                          ),
                        padding: EdgeInsets.all(2.0),

                      //decoration: BoxDecoration(boxShadow:<BoxShadow>[new BoxShadow(color: const Color.fromARGB(50, 0, 0, 0),offset: new Offset(0.0, 0.0),blurRadius: 0.0)]),
                      ),
                    ),
                                      ],
                  );
                  },
            ),
            )
     );
  }
}

Video: https://streamable.com/2xg13

14
  • what is the average size of those HD images?
    – pskink
    Jan 26, 2019 at 9:53
  • Could it be that your images are too large and the delay you see is just the time it takes to load them from disk?
    – Edman
    Jan 26, 2019 at 11:03
  • @pskink The image size varies around 300 to 800kb. Jan 26, 2019 at 11:06
  • @Edman This is the website wallpaperplay.com/board/hetalia-nordics-wallpapers from which I am taking the images. I openned the url in my mobile browser and scrolled to the bottom and top again and didn't see any such reloading. Maybe this is the case, is there any solution? Jan 26, 2019 at 11:10
  • 1
    @RoyalGriffin 1920*2500*4 = 19200000
    – pskink
    Jul 5, 2019 at 3:19

4 Answers 4

14
+50

You can customize the max space for image caching with the following.

class CustomImageCache extends WidgetsFlutterBinding {
  @override
  ImageCache createImageCache() {
    ImageCache imageCache = super.createImageCache();
    // Set your image cache size
    imageCache.maximumSizeBytes = 1024 * 1024 * 100; // 100 MB
    return imageCache;
  }
}

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  if (kReleaseMode) {
     CustomImageCache();
  }
  runApp(MyApp());
}

This is to override Flutter's internal image caching, not the CacheNetworkImage one. Flutter uses 100 MiB by default, so you can try higher values.

3
  • @Martynus i get error: Unhandled Exception: 'package:flutter/src/foundation/binding.dart': Failed assertion: line 56 pos 12: '!_debugInitialized': is n ot true.
    – DolDurma
    May 1, 2020 at 21:04
  • 2
    @DolDurma try placing WidgetsFlutterBinding.ensureInitialized(); after CustomImageCache(); Jun 9, 2020 at 23:06
  • worked for me but I had to increase cache size. and you should only call it in kreleasemode not in debug mode to avoid error Dec 13, 2020 at 20:31
0

The answer is add memCacheWidth and memCacheHeight:

CachedNetworkImage(memCacheHeight: height.toInt(), memCacheWidth: width.toInt());
0
0

I'm getting data from API and showing images using cached_network_image: ^3.2.3 Still its flickering if I open another screen of different content image and come back.

The reason for this is: When we open other screen with different image(more then 2 or 3 mb) then that image is loaded in cache and the previous one is removed from cache. Thus, when we go back it shows a flickering effect. Also if we go to the second page again then again it also show flickering while that image is being stored in cache and the loop goes.

WORKAROUND could be:

Download image from API to local storage i.e hive or sqlite and then show image as Image.asset().

-1

Change the cacheExtent value to 9999 and it works for me

ListView.builder(cacheExtent: 9999)
1

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.