Best way to load long image list in Flutter

Question

I have a ListView for load a list of images using advanced network image plugin like this:

@override
  Widget build(BuildContext context) {
    super.build(context);

    return CachedNetworkImage(
      imageUrl: parseURLImageFromService(productImageURL),
      height: screen.width * ratio,
      placeholder: Container(
        alignment: AlignmentDirectional.center,
        child: CircularProgressIndicator(
          valueColor: AlwaysStoppedAnimation(
            CompanyColors.green[500],
          ),
        ),
      ),
      errorWidget: defaultLogoImage(screen, ratio),
      width: screen.width * (ratio * 0.75),
    );
  }
}

But when i render the app, all image try to load at the same time, i would like to load the images ony by one waiting the previous.

use Listview.builder it will only load the images that are visible as you start scrolling it will load the next images. — anmol.majhail, Oct 27 '18 at 07:53
another workaround is - https://stackoverflow.com/a/49509349/10269042 — anmol.majhail, Oct 27 '18 at 07:55
The problem is the images take much time to load, i don't know why ... — Cortes K., Oct 30 '18 at 15:22
With FadeInImage can't catch error in the fetching process of the image — Cortes K., Oct 30 '18 at 20:14
Is it slow when you're using listview.builder? You sure its a flutter issue then? — Syph, Dec 19 '18 at 14:54

score 0 · Answer 1 · answered Jan 24 '19 at 23:35

I found a way to solve this, but the solution isn't related with Flutter. The main problem is the size of the images and the network speed of download, I solve this adding a function on the backend, that function resize the image when it's uploaded. So when I display the list of image I use the miniature image and when the user open the details I load the original size image.

Best way to load long image list in Flutter

1 Answers1