Listview builder scrolling in Flutter not smooth when combining futurebuilder and streambuilder

问题

I have a comment page for each post in my app that I use streambuilder to fetch the comments from Firebase database. For each comment, I am displaying user's image and their comment.

To get the user's image, I need to use a futurebuilder to find the user in the userData document and then grab the image url and display it (users can change their image profile, name, etc. at any time and I have to grab the updated one from the userData document every time I want to display their name or image anywhere). Here is the code I use:

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,
                      ),
                    ),
                  ),
                ],
              ),
            );
          },
        );
      },
    );
  },
);

When I scroll from bottom to top (most recent to older comments), the scrolling is very smooth with no problem, but when I get to the end of the list (oldest comment) and start scrolling back down, there is a weird jump between the comments and the scrolling is not smooth at least for the first few scrolls.

I have This screencapture here which shows the weird scrolling behavior. Why does this happen?

Thanks!

来源：https://stackoverflow.com/questions/63443381/listview-builder-scrolling-in-flutter-not-smooth-when-combining-futurebuilder-an