title: Flutter List UI not updating properly
body: <p>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.</p>
  <p>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 <a href="https://stackoverflow.com/users/7834341/niklaslehnfeld">NiklasLehnfeld</a>
  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.</p>
  <p>Here is the code</p>
  <pre><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&lt;String, List&gt; grouped = groupBy(chatDocs, (chat) {
                  String dateTime = chat['dateTime'];
                  return dateTime;
                });
                (grouped.forEach((m, v) {
                  print('$m');
                  for (int i = 0; i &lt; 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: &lt;Widget&gt;[
                          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));
                              })
                        ],
                      );
                    });
              }
            },
          );
        },
      );
    }
  </code></pre>
  <p>This is the list of messages that I am fetching</p>
  <p><a href="https://i.stack.imgur.com/UDwaC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UDwaC.png" alt="enter image description here" /></a></p>
  <p>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
  <a href="https://i.stack.imgur.com/faxVw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/faxVw.png" alt="" /></a></p>