I want to discuss about problem I'm facing in a flutter app. The app is a social E-Commerce app with layout like Facebook or Instagram. I am using pagination of 10 posts with multiple images max 4 per post like a grid view. When i scroll upto 5-8 pages app crashes due to large number of images being render.
I have tried many solutions but didn't get ride of the problem. Following are list of some solutions that i have tried till now.
Tried cached_network_image plugin. app crashes on upto 50-60 posts or estimatedly upto 200 images scrolling.
Tried optimized_cached_image. Crash rate is minimized little bit and i was able to scroll upto 250-300 images and then app again crashed.
Tried FadeInImage.network and FadeInImage.memoery widgets but app also crashes when scrolled upto even 100 images.
Download images to local directory and then tried to display images using Image.memory and Image.file widgets. But this solution also didn't work.
Can you suggest me any solution to sort out this issue
CodePudding user response：
If the response contains the large scale of images then use background fetching before you list is being ended .
so before your screen renders you'll already have a data.
CodePudding user response：
- I solve this issue by using the images with the size of 50 kb.
- I download images to local directory and then display images using Image.file.
- Now I render more than 200 images in Listview.builder()
Reason of app Crush :
- The compressed image is fetched from persistent storage
- The image is decompressed into host memory (GPU memory)
- Transferred to device memory (RAM)
my theory
The app crash happen when the image data took too many space in RAM. The lower the image size is, the harder for app to get crashed.