Flutter cache images when retrieved from external storage

Question

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

just don't use the builder constructor, use the normal/unnamed constructor. — hewa jalal
– hewa jalal, Commented May 1, 2020 at 20:13
this is for normal constructor => Creates a scrollable, 2D array of widgets with a custom SliverGridDelegate. this for the builder constructor => Creates a scrollable, 2D array of widgets that are created on demand. also take a look this — hewa jalal
– hewa jalal, Commented May 1, 2020 at 20:23

Kherel · Accepted Answer · 2020-05-02 08:12:26Z

1

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

edited May 2, 2020 at 8:12

answered May 2, 2020 at 7:04

Kherel

16.4k7 gold badges60 silver badges89 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

DolDurma Over a year ago

it doesn't any change :(

Mozes Ong · Accepted Answer · 2020-05-01 23:10:31Z

0

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.

edited May 1, 2020 at 23:10

answered May 1, 2020 at 22:55

Mozes Ong

1,3041 gold badge14 silver badges20 bronze badges

1 Comment

DolDurma Over a year ago

i tested both of ${Random().nextInt(5)} and 1234, but it doesn't any change

Collectives™ on Stack Overflow

Flutter cache images when retrieved from external storage

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related