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.


return GroupedListView<QueryDocumentSnapshot, String>(
order: GroupedListOrder.DESC,
reverse: true,
useStickyGroupSeparators: true,
floatingHeader: true,
elements: snapshot.data!.docs.toList(),
groupBy: (elements) =>
groupHeaderBuilder: (element) => SizedBox(
      height: 40,
      child: Center(
        child: Card(
          child: Padding(
            padding: EdgeInsets.all(8),
            child: Text(
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