Прокрутка конструктора Listview во Flutter не плавная при объединении futurebuilder и streambuilder

Question

У меня есть страница комментариев для каждого сообщения в моем приложении, которое я использую streambuilder для получения комментариев из базы данных Firebase. Для каждого комментария я показываю изображение пользователя и его комментарий.

Чтобы получить изображение пользователя, мне нужно использовать futurebuilder, чтобы найти пользователя в документе userData, а затем захватить URL-адрес изображения и отобразить его (пользователи могут изменить свой профиль изображения, имя и т. Д. В любое время, и я должен захватить обновлял один из документа userData каждый раз, когда я хочу отображать их имя или изображение в любом месте). Вот код, который я использую:

StreamBuilder(
  stream: Firestore.instance
      .collection('posts')
      .document(postId)
      .collection('postComments')
      .orderBy(
        'createdAt',
        descending: true,
      )
      .snapshots(),
  builder: (ctx, chatSnapshot) {
    if (chatSnapshot.connectionState == ConnectionState.waiting) {
      return Center(
        child: CircularProgressIndicator(),
      );
    }
    final chatDocs = chatSnapshot.data.documents;
    return ListView.builder(
      shrinkWrap: true,
      reverse: true,
      itemCount: chatDocs.length,
      itemBuilder: (ctx, index) {
        return FutureBuilder(
          future: Firestore.instance
              .collection('userData')
              .document(userId)
              .get(),
          builder: (context, userSnapshot) {
            if (userSnapshot.connectionState == ConnectionState.waiting) {
              return Container(
                child: CircularProgressIndicator(
                  valueColor:
                      AlwaysStoppedAnimation(Color.fromRGBO(0, 0, 0, 0)),
                ),
              );
            }
            final userData = userSnapshot.data;
            User commentor = User.fromDocument(userData);
            return Padding(
              padding: const EdgeInsets.all(20.0),
              child: Row(
                children: [
                  CircleAvatar(
                    backgroundImage: NetworkImage(
                      commentor.userImage,
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Container(
                      width: MediaQuery.of(context).size.width * 0.5,
                      padding: EdgeInsets.all(10),
                      color: Colors.grey,
                      child: Text(
                        chatDocs[index]['comment'],
                        style: TextStyle(
                          color: Colors.black,
                        ),
                        textAlign: TextAlign.start,
                      ),
                    ),
                  ),
                ],
              ),
            );
          },
        );
      },
    );
  },
);

Когда я прокручиваю снизу вверх (от самых последних к более старым комментариям), прокрутка выполняется очень плавно и без проблем, но когда я дохожу до конца списка (самый старый комментарий) и начинаю прокрутку назад, возникает странный переход между комментарии и прокрутка не гладкие, по крайней мере, для первых нескольких прокруток.

У меня есть этот снимок экрана, который показывает странное поведение при прокрутке. Почему так происходит?

Благодарность!