Flutter Chat Module with FireStore - firebase

Question

Hi i have created a simple Chat module with FireStore everything is working fine both incoming and outgoing messages are being sent. But here's a little bit issue with the flow of List of appearing messages. when message is sent from 1st Emulator it appears randomly on the other Emulator and vise versa.
I tried to reversed the ListView and also the List coming from the SnapShot.
here's the code.
final messages = snapshot.data.docs.reversed;
List<BubbleText> messageBubbles = [];
for (var message in messages) {
final messageText = message.get('text');
final messageSender = message.get('sender');
final currentUser = loggedInUser.email;
final messageWidget = BubbleText(
text: messageText,
sender: messageSender,
isMe: currentUser == messageSender,
);
messageBubbles.add(messageWidget);
}
return Expanded(
child: ListView(
reverse: true,
padding: EdgeInsets.symmetric(vertical: 10, horizontal: 20),
children: messageBubbles,
),
);
This is my ChatScreen.dart file
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:flash_chat/constants.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
User loggedInUser;
final fireStore = FirebaseFirestore.instance;
class ChatScreen extends StatefulWidget {
static String chatID = 'chat_screen';
#override
_ChatScreenState createState() => _ChatScreenState();
}
class _ChatScreenState extends State<ChatScreen> {
final messageTextController = TextEditingController();
final auth = FirebaseAuth.instance;
String messageText;
#override
void initState() {
super.initState();
getCurrentUser();
}
void getCurrentUser() async {
try {
final user = auth.currentUser;
if (user != null) {
loggedInUser = user;
print(loggedInUser.email);
}
} catch (e) {
print(e);
}
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
leading: null,
actions: <Widget>[
IconButton(
icon: Icon(Icons.close),
onPressed: () {
auth.signOut();
Navigator.pop(context);
//Implement logout functionality
}),
],
title: Text('⚡️Chat'),
backgroundColor: Colors.lightBlueAccent,
),
body: SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
StreamBuilder<QuerySnapshot>(
stream: fireStore.collection('messages').snapshots(),
builder: (context, snapshot) {
if (!snapshot.hasData) {
return Center(
child: CircularProgressIndicator(
backgroundColor: Colors.blueAccent,
),
);
}
final messages = snapshot.data.docs.reversed;
List<BubbleText> messageBubbles = [];
for (var message in messages) {
final messageText = message.get('text');
final messageSender = message.get('sender');
final currentUser = loggedInUser.email;
final messageWidget = BubbleText(
text: messageText,
sender: messageSender,
isMe: currentUser == messageSender,
);
messageBubbles.add(messageWidget);
}
return Expanded(
child: ListView(
reverse: true,
padding: EdgeInsets.symmetric(vertical: 10, horizontal: 20),
children: messageBubbles,
),
);
},
),
Container(
decoration: kMessageContainerDecoration,
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Expanded(
child: TextField(
controller: messageTextController,
onChanged: (value) {
//Do something with the user input.
messageText = value;
},
decoration: kMessageTextFieldDecoration,
),
),
TextButton(
onPressed: () {
messageTextController.clear();
//Implement send functionality.
fireStore.collection('messages').add(
{'text': messageText, 'sender': loggedInUser.email});
},
child: Text(
'Send',
style: kSendButtonTextStyle,
),
),
],
),
),
],
),
),
);
}
}
class BubbleText extends StatelessWidget {
BubbleText({this.text, this.sender, this.isMe});
final String text, sender;
final bool isMe;
#override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
crossAxisAlignment:
isMe ? CrossAxisAlignment.end : CrossAxisAlignment.start,
children: [
Text(
sender,
style: TextStyle(
color: Colors.black54,
fontSize: 12.0,
),
),
Material(
elevation: 5,
borderRadius: isMe
? BorderRadius.only(
topLeft: Radius.circular(30),
bottomLeft: Radius.circular(30),
bottomRight: Radius.circular(30))
: BorderRadius.only(
topRight: Radius.circular(30),
bottomLeft: Radius.circular(30),
bottomRight: Radius.circular(30)),
color: isMe ? Colors.blueAccent : Colors.white,
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 20),
child: Text(
text,
style: TextStyle(
color: isMe ? Colors.white : Colors.black,
fontSize: 15,
),
),
),
),
],
),
);
}
}
i spent over 3 hrs on it but couldn't find a proper solution.

Answer 1

you can add a timesTamp field in the messages document, So every single message should have a timestamp and when you read the data try to sort it by that timesTamp, it is worked with me, and DON'T forget to remove the revered property from the List Widget
here is my suggestion :
final messages = snapshot.data.docs;
if(messages != null){
messages = messages..sort((a,b)=>a.timesTamp>b.timestamp);
}
List<BubbleText> messageBubbles = [];
for (var message in messages) {
final messageText = message.get('text');
final messageSender = message.get('sender');
final currentUser = loggedInUser.email;
final messageWidget = BubbleText(
text: messageText,
sender: messageSender,
isMe: currentUser == messageSender,
);
messageBubbles.add(messageWidget);
}
return Expanded(
child: ListView(
padding: EdgeInsets.symmetric(vertical: 10, horizontal: 20),
children: messageBubbles,
),
);

Answer 2

Just reverse your list like this when you define your list
final chatList = data.reversed.toList();