So what I'm looking to achieve is:

  1. Display a long list of hotels, each has one single image url. All these retrieved from an API.
  2. I need it to be smooth/lightweight, so no noticeable fps drops when loading AND scrolling - caching isn't necessary, but if can be implemented without memory problems that'd be cool. (Always have this problem with IOS devices, tested with iphone 6+ I believe)
  3. Options to display placeholder image for when it's loading and when it fails to load regardless of the issue.

What I've tried:

  1. Cached Network Image (the most common solution I find. But memory problems for more than 100+ images. IOS users reports app crashing/closing itself either on scroll or after a bit of loading time. Asked in their github's issues and it seems that this is common problem - still no fix. Tried the suggestions there. Still to no avail.
  2. Advanced Network Image (screen freezes when loading list, probably because it tries to load all image urls at once), also no option for a placeholder image for when an error occurs, not just while the image is loading.

Anyone has encountered similar circumstances and found a satisfactory solution for an acceptable UX? I thought this would be a common enough use case to display a long list of images from network smoothly, but I can't seem to get through this for so long. Pardon me, but I'm a relatively new mobile dev starting to learn the ropes on my own. Any help would be much appreciated. Thank you in advance.


Solution 1: Miguel Ruivo

You are caching a lot of stuff at once and that may result in unexpected behavior due to network requests + processing (specially on low end devices).

You can first try increasing the cacheExtent from your ListView to let it start loading before actually reaching the elements and give you a more smooth experience.

    ListView.builder(
          cacheExtent: 1500, // Play with this offset value, by default is 250 pixels
          itemCount: items.length,
          itemBuilder: (_, __) => CachedNetworkImage(child: YourWidget()),
        );

However, don't increase that value too much because it will force the users to cache content beforehand which may be unnecessary, that's why ListView uses lazy building to load content on demand.


Solution 2: Biby Chacko

Use memCacheHeight: attribute of CachedNetworkImage along with Cache Extend of ListView, it might solve the problem