Flutter How to display multiple image from device without filling memory

Viewed 33

I tried to use local_image_provider to uptain image and video address of android device, after detect address I add these to a list

  List<DeviceImage> devideImgs = [];


getImage() async {
lip.LocalImageProvider imageProvider = lip.LocalImageProvider();
bool hasPermission = await imageProvider.initialize();

if (hasPermission) {
  List<lip.LocalImage> images = await imageProvider.findLatest(100000);

  images.forEach((image) async {
    if (image.isImage) {
      devideImgs.add(DeviceImage(image));
    }
  });

} else {
  print("The user has denied access to images on their device.");
}
update();
}

and then tried to show these images in a gridview like this

 StaggeredGridView.countBuilder(



                crossAxisCount: 3,
                mainAxisSpacing: 3,
                crossAxisSpacing: 3,




                itemCount: devideImgs.length,


                itemBuilder: (context, index) {
                  print('item $index created in grid view');
                  key: UniqueKey();
                  return Item(devideImgs[index]);

                },
                staggeredTileBuilder: (index) => StaggeredTile.count(1,1),
              )

this is my Item widget

 Stack(
  children: [
    VisibilityDetector(
        key: UniqueKey(),
        onVisibilityChanged: (visibilityInfo) async {
       
        
        },
        child: Container(
            child: GestureDetector(
                onTap: () {},
                child: 
                    SizedBox(
                        width: double.maxFinite,
                        height: double.maxFinite,
                        child: Image(
                          image: widget.image,
                          fit: BoxFit.cover,
                        )) 
                ))),
 
  ],
  );

that widget.image is a DeviceImage every thing work good but when I scroll gridview I think I'm filling up memory and then I recieve this error

I/art     (19971): Starting a blocking GC Alloc
I/art     (19971): Alloc sticky concurrent mark sweep GC freed 87(4KB) AllocSpace objects, 
0(0B) LOS objects, 15% free, 81MB/97MB, paused 1.224ms total 14.060ms

and then app crashed, I used Gridview.builder but I think the Items and images dont clear when these are not visible in screen

Please tell me how can I fix it

1 Answers

Hey guys I solved this problem by replacing

 Image(
                      image: widget.image,
                      fit: BoxFit.cover,
                    )

with

                       FadeInImage(
                          fit: BoxFit.cover,
                          placeholder: MemoryImage(kTransparentImage),
                          image: ThumbnailProvider(
                              mediumId:  widget.image.localImage.id.toString(),
                               highQuality: true,
                           ),

                        )

and this code is from photo gallery package

Related