dart - Flutter List UI not updating properly

Question

I am building a one to one chat app using Flutter and firebase and I want to display all the chats under label of the day on which it happened,like it is on all major chat apps.

I retrieve data from firestore in ascending order of time by using order by command on the timestamp field of each message and as suggested by NiklasLehnfeld i used groupBy method in the collection package to group my messages and used nested list view builders outer one for creating groups and inner one for filling those groups with data.

Here is the code

  Widget build(BuildContext context) {
    return FutureBuilder(
      future: FirebaseAuth.instance.currentUser(),
      builder: (ctx, futureSnapshot) {
        if (futureSnapshot.connectionState == ConnectionState.waiting) return Center(child: CupertinoActivityIndicator());
        return StreamBuilder(
          stream: Firestore.instance
              .collection('mychats/${futureSnapshot.data.uid}/${widget.recieverUid}')
              .orderBy('createdAt', descending: true)
              .snapshots(),
          builder: (context, chatSnapshots) {
            if (chatSnapshots.connectionState == ConnectionState.waiting)
              return Center(child: CupertinoActivityIndicator());
            else {
              final List chatDocs = chatSnapshots.data.documents;

              Map<String, List> grouped = groupBy(chatDocs, (chat) {
                String dateTime = chat['dateTime'];
                return dateTime;
              });
              (grouped.forEach((m, v) {
                print('$m');
                for (int i = 0; i < v.length; i++) {
                  print(v[i]['text']);
                }
              }));
              return ListView.builder(
                  reverse: true,
                  itemCount: grouped.keys.length,
                  itemBuilder: (ctx, index1) {
                    String date = grouped.keys.toList()[index1];
                    List messages = grouped[date];
                    return Column(
                      mainAxisSize: MainAxisSize.min,
                      children: <Widget>[
                        Text(date),
                        ListView.builder(
                            reverse: true,
                            primary: false,
                            shrinkWrap: true,
                            itemCount: messages.length,
                            itemBuilder: (context, index) {
                              return MyMessageBubble(
                                  chatDocs[index].documentID,
                                  chatDocs[index]['text'],
                                  (chatDocs[index]['userId'] == futureSnapshot.data.uid) ? true : false,
                                  ValueKey(chatDocs[index].documentID));
                            })
                      ],
                    );
                  });
            }
          },
        );
      },
    );
  }

This is the list of messages that I am fetching

This is the UI .The results that i am printing in console are not displaying correctly in UI.I tried setting keys for both the list builders but no success. Is there any way it can be corrected

Answer 1

You are using the wrong list:

This:

chatDocs[index].documentID,
chatDocs[index]['text'],
(chatDocs[index]['userId'] == futureSnapshot.data.uid) ? true : false,
ValueKey(chatDocs[index].documentID));

should reference messages, not chatDocs. Because index is the index into messages.