I am practicing a message app. I stored it in firestore

Question

I am developing a flutter app and storing the Text inside message in FIRESTORE. But the problem here is, When i type a message and press the onTap it store the message in the firestore but the streambuilder doesn't update the text in the chronological order. What to with this?

Here is the message gets updated

 Expanded(
                child: Container(
                  child: Column(
                    children: [
                      MessageStream(),
                    ],
                  ),
                ),
              ),

onTap funtion add the text inside firestore

GestureDetector(
                      onTap: () {
                        _messageTextController.clear();
                        if (messageTyped.trim().isNotEmpty) {
                          _firestore.collection('messages').add({
                            'Text': messageTyped,
                            'Sender': loggedInUser.email,
                          });
                        }
                      },
                      child: Container(
                        margin: EdgeInsets.only(
                            left: 2.2 * SizeConfig.widthMultiplier), //8
                        width: 13.88 * SizeConfig.widthMultiplier,
                        height: 7.44 * SizeConfig.heightMultiplier,
                        decoration: BoxDecoration(
                          shape: BoxShape.circle,
                          color: Colors.lightBlueAccent,
                        ),
                        child: Icon(
                          Icons.send,
                          color: Colors.white,
                        ),
                      ),
                    ),

MessageStream stl widget

class MessageStream extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return StreamBuilder<QuerySnapshot>(
      stream: _firestore.collection('messages').snapshots(),
      builder: (context, snapshot) {
        if (!snapshot.hasData) {
          return Center(
            child: CircularProgressIndicator(
              backgroundColor: Colors.lightBlueAccent,
            ),
          );
        }
        final messages = snapshot.data.docs.reversed;
        List<MessageBubble> messageBubbles = [];
        for (var message in messages) {
          final messageSender = message.data()['Sender'];
          final messageText = message.data()['Text'];
          final currentUser = loggedInUser.email;

          final messageBubble = MessageBubble(
            text: messageText,
            sender: messageSender,
            isMe: currentUser == messageSender,
          );
          messageBubbles.add(messageBubble);
        }
        return Expanded(
          child: ListView(
            reverse: true,
            padding: EdgeInsets.all(10.0),
            children: messageBubbles,
          ),
        );
      },
    );
  }
}

Answer 1

Add a dateCreated field when saving messages:

_firestore.collection('messages').add({
  'Text': messageTyped,
  'Sender': loggedInUser.email,
  'dateCreated': FieldValue.serverTimestamp(),
});

Then use dateCreated to order stream results:

StreamBuilder<QuerySnapshot>(
  stream: _firestore.collection('messages')
   .orderBy('dateCreated', descending: false)
   .snapshots(),
  builder: (context, snapshot) {
   ...
 },
)