How can I update Listview in Streambuilder in flutter

Question

I have a streambuidler widget that contains a listview to display whom the current user has recently chatted with. When the current user receives a message that message should be pushed to the top of the listview, however that message is always display at the bottom of the list view, it's only display on the top if I refresh my screen.

NoSearchResultScreen() {
final Orientation orientation = MediaQuery.of(context).orientation;
print("hasAlreadyChatWithSomeone: $hasAlreadyChatWithSomeone");
return hasAlreadyChatWithSomeone
    ? StreamBuilder<QuerySnapshot>(
        stream: (FirebaseFirestore.instance
            .collection("user")
            .where("id", isEqualTo: currentUserId)
            .snapshots()),
        builder: (context, snapshot) {

          List<ProfileChatWith> chatWithList = [];
          if (snapshot.connectionState == ConnectionState.waiting) {
            return Center(
              child: circularProgress(),
            );
          }
          if (snapshot.hasData) {
            final chatWithSnapshot = snapshot.data?.docs.first['chatWith'];
            //print("chatWithSnapshot: $chatWithSnapshot");
            for (var userChatWith in chatWithSnapshot) {
              final user = ProfileChatWith(
                userId: userChatWith,
                currentUserId: currentUserId,
              );
              chatWithList.add(user);
              //print("I have chatted with: $userChatWith");
            }
            return Container(
              width: MediaQuery.of(context).size.width,
              child: ListView(
                //shrinkWrap: true,
                children: chatWithList,
              ),
            );
          } else {
            return Center(
              child: circularProgress(),
            );
          }
        },
      )
    : Container(
        child: Center(
          child: ListView(
            shrinkWrap: true,
            children: <Widget>[
              Icon(
                Icons.group,
                color: Colors.greenAccent,
                size: 200.0,
              ),
              Text(
                "Search Users",
                textAlign: TextAlign.center,
                style: TextStyle(
                    color: Colors.greenAccent,
                    fontSize: 50.0,
                    fontWeight: FontWeight.bold),
              )
            ],
          ),
        ),
      );

}

Answer 1

Try reverse: true,

return SizedBox(
            width: MediaQuery.of(context).size.width,
  child: ListView(
    reverse: true,
    children: chatWithList,
  ),
);

Use Listview.builder for performance optimization

return SizedBox(
      width: MediaQuery.of(context).size.width,
      child: ListView.builder(
        reverse: true, 
        itemBuilder: (BuildContext context, int index) => chatWithList[index],
      ),
    );