Improving scroll performance using a lot of images (thumbnails) in Flutter

Question

I have been making an app where there is a list of horizontal lists (similar to Spotify). In those horizontal lists are thumbnails displayed using the CachedNetworkImage widget.

I haven't managed to get the scroll performance to be smooth (less than 16 ms per frame, or anywhere near that).

Here is some sample code (using lorem picsum to get randomly generated jpegs):

Widget build(BuildContext context) {
    return new Scaffold(
      backgroundColor: Colors.black,
      body: new CustomScrollbar(
        child: new ListView.builder(
          controller: _scrollController,
          itemCount: 30,
          itemBuilder: (context, index){
            return new Padding(
              padding: const EdgeInsets.symmetric(vertical: 10.0),
              child: new Container(
                width: double.infinity,
                height: 100.0,
                child: new ListView.builder(
                  scrollDirection: Axis.horizontal,
                  itemCount: 20,
                  itemBuilder: (context, innerIndex){
                    return new Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 10.0),
                      child: new Container(
                        height: 100.0,
                        width: 100.0,
                        alignment: Alignment.center,
                        decoration: BoxDecoration(
                          border: Border.all(color: Colors.white, width: 1.0),
                          borderRadius: BorderRadius.circular(10.0)
                        ),
                        child: new ClipRRect(
                          borderRadius: BorderRadius.circular(10.0),
                          child: new CachedNetworkImage(
                            imageUrl: _thumbnailsByArtist[index.toString()][innerIndex],
                          ),
                        ),
                      ),
                    );
                  }
                ),
              ),
            );
          }
        ),
      )
    );
  }

Effectively (although this will obviously vary in the actual app) there are 600 images (30 horizontal lists of 20 images each) in the list to be displayed. The jpegs being automatically generated by lorem picsum are 100x100.

Is this too ambitious to have perform smoothly in Flutter or is there something I'm missing here?

Solution

I would watch this talk about optimising Flutter apps from the Flutter Team. Essentially you are creating at least 15 new widgets (the const widgets should be cached) per item being displayed in your list, so that would be 600 * 15 = 9000 widgets.

If you want to jump to the solution, try extracting your item into a stateless widget that accepts the current index as an argument and renders your item. That should hopefully speed things up.

Comments

[countpablo]

I actually watched that talk but the Observatory doesn't seem to work for me for some reason (github.com/dart-lang/sdk/issues/41257), in any case I tried what you said and it increased performance pretty significantly so I'm going to accept. Thanks a lot!