Memory overflow issues

[YudiH]

Hi, my app requires a page that loads a listing of hotels (along with 1 image each) in a given area (can be up to 500+ images for a crowded city). I can't seem to find a good all round solution that does not crash or lag the application during these conditions. But I also appreciate the utility that this plugin offers, namely the error placeholder as well as loading placeholder (both are lacking from other sources I found).

First of all, thank you very much for making such a useful tool. However, I think the memory problem with the cache handling here still needs improvement for use cases such as mine (which I imagine is pretty common). I have tried to customize the cache age duration to no avail. Is there any upcoming updates I can look forward to? I sort of have to decide on a solution really soon.

I'm actually not sure if its the amount of images being loaded or that it's due to them all being loaded at the same time. Does anyone happen to know another solution as a temporary alternative?

Much appreciated

[Kavantix]

Does your app show all the images at once?
Or does it only crash when scrolling fast?

[YudiH]

I'm relatively certain its loading all images at once. Because it lags when loading but after it finishes I could scroll relatively smoothly with all the images not showing any signs of just fading in when scrolled into.

Also, my debug console is filled with this when loading the list:
"Warning database has been locked for 0:00:10.000000. Make sure you always use the transaction object for database operations during a transaction"

The crash happens when I select one of the hotels to go look into the details. It navigates to another page which loads some more images of the rooms and sceneries of that hotel (not a lot more....about 10-20 ish). At which point it often crashes when loading into that page.

I'm not too familiar with these backend stuffs, so apologies in advance if I may be too vague. Let me know if you require any info in more specific. I'll try my best to describe. Thank you.

Edit: This only happens when I'm loading a list that's above 200-300 I think. Can't be sure because the most I have is 500+ and the second longest is only at 177 (no problem loading this). Only that 500+ one.

[Kavantix]

How do you specify the list of hotels in flutter, do you use a ListView with children or a ListView.builder?

[YudiH]

It is ListView.builder inside a FutureBuilder

Edit: Wait a minute... is that why...?

[alectogeek]

It is common flutter problem. flutter/flutter#32156

@YudiH You could try to decrease imageCache maximumSizeBytes so your app will consume less RAM and will not be terminated by OS

[YudiH]

@alectogeek Will keep that in mind for the next build. Thanks.

[YudiH]

@alectogeek Sorry, how do I reduce maximumSizeBytes for imageCache?

Edit: Right now I'm adding ImageCache().maximumSizeBytes = 15; under Widget build(BuildContext context) {.... Not sure what the number of bytes should be.

[samantp]

Same problem for me. I reproduced it with the sample code given on official example: https://pub.dev/packages/cached_network_image#-example-tab- using _gridView. Just that instead of default small images, I used larger images average size of 2odd Mb (jpgs). The app crashed with out of memory error on my Moto G6 play with just 7 images. The memory taken went up to 600Mb before crashing.

So for now, I used Image.network with a reasonable value for cacheHeight and cacheWidth parameters, between 100-360 for all my grids and lists showing images. Cannot use some goodies like errorImage and others. So left out places where single or two images were displayed, as CachedNetworkImages.

[renefloor]

I'd expect this to be fixed in 2.3.0-beta. You can also set memCacheHeight or width as parameters if the images are large

[MichealReed]

@renefloor I'm still seeing this in 2.3.0-rc. Memory goes to max consumption when using many gifs.

edit: (on web)

[renefloor]

@MichaelMarner I can imagine it uses a lot of memory on the web, as it caches the files in memory in that case. It should be better if you use ImageRenderMethodForWeb.HtmlImage