how create Date header like WhatsApp in flutter chat

user_14849368 0
Viewed 1916

I am new in flutter. I am trying to build chat application using Firebase. I want to show group message with date header just like WhatsApp chat.

flutter
2 Answers

you can use grouped_list package

GroupedListView<dynamic, String>(
elements: _elements,
groupBy: (element) => element['group'],
groupSeparatorBuilder: (String groupByValue) => Text(groupByValue),
itemBuilder: (context, dynamic element) => Text(element['name']),
itemComparator: (item1, item2) => item1['name'].compareTo(item2['name']), // optional
useStickyGroupSeparators: true, // optional
floatingHeader: true, // optional
order: GroupedListOrder.ASC, // optional),

you can group by dates and returns massages

Admin1

Also u can use https://pub.dev/packages/sticky_grouped_list package

StickyGroupedListView<dynamic, String>(
    elements: _elements,
    groupBy: (dynamic element) => element['group'],
    groupSeparatorBuilder: (dynamic element) => Text(element['group']),
    itemBuilder: (context, dynamic element) => Text(element['name']),
    itemComparator: (element1, element2) => element1['name'].compareTo(element2['name']), // optional
    itemScrollController: GroupedItemScrollController(), // optional
    order: StickyGroupedListOrder.ASC, // optional
  ),
user_66642500
Related