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

}

I think the [setState](https://api.flutter.dev/flutter/widgets/State/setState.html) method may help you. Have a look at this [stackoverflow link](https://stackoverflow.com/questions/60304852/flutter-listview-not-updating-after-data-update) — Badala Prashanth, Dec 27 '21 at 13:24

score 0 · Accepted Answer · answered Dec 27 '21 at 09:10

0

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

answered Dec 27 '21 at 09:10

Shahzaib Ahmed

189
4

This one will only reverse the list order so it couldn't help me, I found a way to solve my question is that I will rebuild my widget whenever the data got updated. Btw thank you so much for your kind help. – Leo Tran Dec 30 '21 at 04:49

score 0 · Answer 2 · answered Jan 14 '22 at 12:05

0

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.

answered Jan 14 '22 at 12:05

Gourav B

864
5
17

How can I update Listview in Streambuilder in flutter

2 Answers2