CODEWITHSUNDEEP
flutter
DolDurma
DolDurma

Reputation: 17301

Flutter cache images when retrieved from external storage

in this code which i used in my application i want to cache images during i scroll grid view, basically when i scroll grid view that cause reload again images and cause of getting speeding low during scroll

is any way to cache images before put them into GridView like with ImageCache?

StreamBuilder<List<MediaModel>>(
  stream: _globalBloc.storageMediaBloc.imagesMedia$,
  builder: (context, snapshot) {
    final List<MediaModel> _allImages = snapshot.data;
    _allImages.map((image) => mediaFoldersList.add(MediaDropDownStructure(image.folder, image.folder)));
    final MediaModel _all = _allImages[1];
    return GridView.builder(
      controller: scrollController,
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 3,
        mainAxisSpacing: 5.0,
        crossAxisSpacing: 5.0,
      ), //change the numb
      itemBuilder: (context, index) {
        return AspectRatio(
            aspectRatio:1.0,
            child: Image(image: FileImage(File('${_all.files[index]}')),fit: BoxFit.cover,));
      },
      itemCount: _all.files.length,
    );
  }
),

Upvotes: 1

Views: 503

Answers (2)

Kherel
Kherel

Reputation: 16185

I'm not sure, try to move the file reading out of the grid builder:

  StreamBuilder<List<MediaModel>>(
  stream: _globalBloc.storageMediaBloc.imagesMedia$,
  builder: (context, snapshot) {
    final List<MediaModel> _allImages = snapshot.data;
    _allImages.map((image) => mediaFoldersList.add(MediaDropDownStructure(image.folder, image.folder)));
    final List<File> _all = _allImages[1].map((path) => File(path));

    return GridView.builder(
      controller: scrollController,
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 3,
        mainAxisSpacing: 5.0,
        crossAxisSpacing: 5.0,
      ), //change the numb
      itemBuilder: (context, index) {
        return AspectRatio(
            aspectRatio:1.0,
            child: Image(image: FileImage(_all[index]),fit: BoxFit.cover,));
      },
      itemCount: _all.files.length,
    );
  }
),

Upvotes: 1

Mozes Ong
Mozes Ong

Reputation: 1294

I faced a similar issue as yours where images are constantly re-rendering even if the images are stored locally.

return AspectRatio(
        aspectRatio:1.0,
        child: Container(key: Key("1234"), child:Image(image: FileImage(File('${_all.files[index]}')),fit: BoxFit.cover,)))

I found that by adding a random key like Key("1234") would prevent the image from re-rendering.

Do try out the solution and let me know if it works.

Upvotes: 0

Related Questions