Улучшение производительности прокрутки с использованием большого количества изображений (миниатюр) в Flutter

Question

Я делаю приложение, в котором есть список горизонтальных списков (аналог Spotify). В этих горизонтальных списках есть миниатюры, отображаемые с помощью виджета CachedNetworkImage.

Мне не удалось добиться плавной прокрутки (менее 16 мс на кадр или где-то рядом).

Вот пример кода (с помощью lorem picsum для получения случайно сгенерированных 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],
                          ),
                        ),
                      ),
                    );
                  }
                ),
              ),
            );
          }
        ),
      )
    );
  }

Эффективно (хотя это, очевидно, будет меняться в реальном приложении) есть 600 изображений (30 горизонтальных списков по 20 изображений в каждом) ) в списке для отображения. Jpegs, автоматически генерируемые lorem picsum, имеют размер 100x100.

Это слишком амбициозно, чтобы плавно выступать в Flutter, или я что-то здесь упускаю?

Answer 1

Я бы посмотрел этот разговор об оптимизации приложений Flutter от команды Flutter. По сути, вы создаете по крайней мере 15 новых виджетов (константные виджеты должны кэшироваться) для каждого элемента, отображаемого в вашем списке, так что это будет 600 * 15 = 9000 виджетов.

Если вы хотите перейти к решению, попробуйте извлечь ваш элемент в виджет без состояния, который принимает текущий индекс в качестве аргумента и отображает ваш элемент. Надеюсь, это должно ускорить процесс.