CODEWITHSUNDEEP
androiddartflutter
dheeraj reddy
dheeraj reddy

Reputation: 1197

Flutter image cache: Images are reloading

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

Upvotes: 14

Views: 14488

Answers (4)

Sanny khan
Sanny khan

Reputation: 393

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().

Upvotes: 0

Nam Le
Nam Le

Reputation: 1

The answer is add memCacheWidth and memCacheHeight:

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

Upvotes: 0

Martyns
Martyns

Reputation: 3885

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.

Upvotes: 16

Mahmoud Mohsen
Mahmoud Mohsen

Reputation: 7

Change the cacheExtent value to 9999 and it works for me

ListView.builder(cacheExtent: 9999)

Upvotes: -1

Related Questions