How to fix Listview scrolling jank when loading images from network

Are you sure your images are not very heavy? Check the size of the images first. Also you can use the package named: cache_network_image

It's very simple :

new Image(image: new CachedNetworkImageProvider(url))

UPDATE (Package was updated)

CachedNetworkImage(
        imageUrl: "http://via.placeholder.com/350x150",
        placeholder: (context, url) => new CircularProgressIndicator(),
        errorWidget: (context, url, error) => new Icon(Icons.error),
     ),

There are two was to speed up the rendering of your ListView of images.

The first is to set the cacheExtent property to a larger value in your ListView constructor. This property controls how much offscreen widgets are rendered, and will help by causing the rendering to start a bit sooner.

The second is to pre-cache your images using precacheImage. Flutter has an in-memory cache, so it is generally to necessary to cache everything to disk to get good read performance. Instead, you can ask Flutter to download these images ahead of time so that they are ready when the widget is built. For example, if you have a list of urls of your image, then in an initState method you could ask Flutter to cache all of them.

final List<String> imageUrls = [ /* ... */ ];

@override
void initState() {
  for (String url in imageUrls) {
    precacheImage(new NetworkImage(url), context);
  }
  super.initState();
}

you can also use:

FadeInImage.assetNetwork(
  placeholder: 'assets/ic_logo.png',
  image: event.photoUrl,
  height: 77.0,
  width: 77.0,
  fit: BoxFit.cover,
  fadeInDuration: new Duration(milliseconds: 100),
),

but yeah, per diegoveloper, you sure your images aren't huge? Listview has no problem rendering anything that's close to reasonable in size.

Tags:

Flutter