How can I update Listview in Streambuilder in flutter-CodePudding

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

}

CodePudding user response：

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

CodePudding user response：

The solution which worked is as below, @Leo Tran own words

I found a way to solve my question is that I will rebuild my widget whenever the data got updated.