I have implemented GroupedListView into a project and I'm having an issue in the messages order.

enter image description here

As you can see the messages are not in order.

Code:

return GroupedListView<QueryDocumentSnapshot, String>(
order: GroupedListOrder.DESC,
reverse: true,
useStickyGroupSeparators: true,
floatingHeader: true,
elements: snapshot.data!.docs.toList(),
groupBy: (elements) =>
    DateFormat.EEEE().format(elements['time'].toDate()),
groupHeaderBuilder: (element) => SizedBox(
      height: 40,
      child: Center(
        child: Card(
          child: Padding(
            padding: EdgeInsets.all(8),
            child: Text(
              DateFormat.EEEE()
                  .format(element['time'].toDate())
                  .toString(),
            ),
          ),
        ),
      ),
    ),
itemBuilder: (context, elements) {
  if (elements['isMe'] == true) {
    return MyMessageCard(
      message: elements['text'],
      date: elements['time'],
    );
  }
  return GroupSenderMessageCard(
      message: elements['text'], date: elements['time']);
});


Solution 1: Ankit Kumar Maurya

Try using groupComparator or itemComparator as documented here

In your case itemComparator