如何组织用于聊天应用程序的消息？

Question

我正在扑朔迷离地聊天。一切运行良好，直到我尝试显示来自Firebase数据库的消息。消息是按时间组织的，因此它们没有排序！但是，当我与另一个人测试我的应用程序时，向该人发短信，聊天屏幕被这两个人分开，但消息仍按时间组织。让我给你举个例子。

在此照片中，它是聊天屏幕的一部分。您看不到，但是我正在和我的女朋友聊天，她的消息在屏幕顶部，因此，如果我想查看她的消息，则必须向上滑动。如您所见，消息是按时间组织的（我对Firebase说过这种情况）。但是屏幕是按人分割的，并且无法正常显示。

这里是代码。拜托，我真的不知道该怎么解决

StreamBuilder(
            stream: Firestore.instance
                .collection('messages')
                .document(groupChat)
                .collection(groupChat)
                .orderBy('time', descending: false)
                .limit(20)
                .snapshots(),
            // ignore: missing_return
            builder: (context, snapshot) {
              switch (snapshot.connectionState) {
                case ConnectionState.none:
                case ConnectionState.waiting:
                  return Center(child: CircularProgressIndicator());
                default:
                  List<DocumentSnapshot> document =
                      snapshot.data.documents.reversed.toList();
                  return ListView.builder(
                      reverse: true,
                      itemCount: snapshot.data.documents.length,
                      // ignore: missing_return
                      itemBuilder: (context, index) {
                        Map<String, dynamic> data = document[index].data;
                        if (data['fromUid'] == widget.currentUser.uid) {
                          mine = true;
                        } else {
                          mine = false;
                        }
                        return Container(
                          margin: const EdgeInsets.symmetric(
                              vertical: 10.0, horizontal: 10.0),
                          child: Row(
                            children: <Widget>[
                              !mine
                                  ? Padding(
                                      padding: EdgeInsets.only(right: 16.0),
                                      child: CircleAvatar(
                                        backgroundImage: NetworkImage(
                                            data['fromPhotoUrl']),
                                      ),
                                    )
                                  : Container(),
                              Expanded(
                                child: Column(
                                  crossAxisAlignment: mine
                                      ? CrossAxisAlignment.end
                                      : CrossAxisAlignment.start,
                                  children: <Widget>[
                                    data['imgURL'] != null
                                        ? Image.network(data['imgURL'],
                                            width: 160.0)
                                        : Material(
                                            color: mine
                                                ? Colors.blueAccent
                                                : Colors.white30,
                                            borderRadius: mine
                                                ? 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)),
                                            elevation: 6,
                                            child: Padding(
                                              padding: EdgeInsets.symmetric(
                                                  horizontal: 20,
                                                  vertical: 15),
                                              child: Column(
                                                children: <Widget>[
                                                  Text(
                                                    data['text'],
                                                    style: TextStyle(
                                                        fontSize: 16.0,
                                                        color:
                                                            Colors.white),
                                                    textAlign: mine
                                                        ? TextAlign.end
                                                        : TextAlign.start,
                                                  ),
                                                  Text(
                                                    "${data['from']}",
                                                    style: TextStyle(
                                                      fontSize: 13.0,
                                                      color: Colors.white70,
                                                      fontWeight:
                                                          FontWeight.w500,
                                                    ),
                                                  ),
                                                ],
                                              ),
                                            ),
                                          ),
                                  ],
                                ),
                              ),
                              mine
                                  ? Padding(
                                      padding: EdgeInsets.only(left: 16.0),
                                      child: CircleAvatar(
                                        backgroundImage: NetworkImage(
                                            data['fromPhotoUrl']),
                                      ),
                                    )
                                  : Container(height: 5.0),
                            ],
                          ),
                        );
                      });
              }
            })