I’m working on a chat app using Flutter and Firebase for data storage. Right now, I’m having trouble sorting and displaying messages correctly by date.

Here’s the code I’m using to sort and display the messages:

Widget _buildMessageList() {
  String senderId = _authService.getCurrentUser()!.uid;
  Stream<fc.QuerySnapshot> currentStream;
  
  if (widget.isGroupChat) {
    currentStream = _chatService.getMessagesFromGroup(widget.receiverID);
  } else {
    currentStream = _chatService.getMessages(widget.receiverID, senderId);
  }
  
  return StreamBuilder<fc.QuerySnapshot>(
    stream: currentStream,
    builder: (context, snapshot) {
      if (snapshot.hasError) {
        return Center(child: Text("Error: ${snapshot.error}"));
      }

      if (snapshot.connectionState == ConnectionState.waiting) {
        return Center(child: CircularProgressIndicator());
      }

      if (!snapshot.hasData || snapshot.data!.docs.isEmpty) {
        return Center(child: Text("No messages"));
      }

      // Extrahiere die Nachrichten und sortiere nach Datum
      List<fc.DocumentSnapshot> messages = snapshot.data!.docs;
      messages.sort((a, b) {
        DateTime timeA = (a['timestamp'] as fc.Timestamp).toDate();
        DateTime timeB = (b['timestamp'] as fc.Timestamp).toDate();
        return timeA.compareTo(timeB);
      });

      // Gruppierung und Anzeige nach Datum
      List<MessageElement> messageElements = [];
      DateTime? currentDate;

      for (var message in messages) {
        DateTime messageDate = (message['timestamp'] as fc.Timestamp).toDate();

        // Prüfe, ob eine neue Gruppe (Datum) begonnen werden muss
        if (currentDate == null || !isSameDay(currentDate!, messageDate)) {
          messageElements.add(MessageElement(
            timeBubble: true,
            dataBox: message,
            displayTimeMessage: _formatDate(messageDate),
            time: message['timestamp'],
          ));
          currentDate = messageDate;
        }

        // Füge die Nachricht hinzu
        messageElements.add(MessageElement(
          timeBubble: false,
          dataBox: message,
          displayTimeMessage: _formatDate(messageDate),
          time: message['timestamp'],
        ));
      }

      return GroupedListView<dynamic, String>(
        elements: messageElements,
        groupBy: (element) => element.displayTimeMessage,
        groupSeparatorBuilder: (String groupByValue) => TimeBubble(day: groupByValue),
        itemBuilder: (context, element) => _buildMessageItem(element.dataBox, element.timeBubble, ""),
        order: GroupedListOrder.DESC,
        reverse: true,
        controller: _scrollController,
      );
    },
  );
}

// Überprüft, ob zwei DateTime Objekte den gleichen Tag haben
bool isSameDay(DateTime dateA, DateTime dateB) {
  return dateA.year == dateB.year && dateA.month == dateB.month && dateA.day == dateB.day;
}

// Formatierung des Datums für die Anzeige
String _formatDate(DateTime date) {
  return "${date.year}-${date.month}-${date.day}";
}

The issue is that sometimes messages with later dates (e.g., “2024-7-12”) are appearing before messages with earlier dates (e.g., “2024-7-3”). I’ve used the compareTo() method to compare DateTime objects, but the sorting doesn’t seem to be working correctly.

Could someone please check my code and help me fix the sorting problem? I’m not sure what I’m doing wrong and would appreciate any assistance.

Thanks!