How to create a chat page with a sticky header like Telegram group chat in Flutter?

Question

I'm building a page like the Telegram group chat, but I'm having trouble giving position sticky to both the date widget and the user's avatar at the same time.

I tried almost all the packages available for this on pub.dev, including FlutterStickyHeader and FlutterListView, but I could not give the Avatar and Date widgets a Sticky position at the same time because they are in opposite directions. I also tried to build it myself with CustomScrollView but again encountered the same problem. The closest result to what I want was the FlutterListView package, but I can only give a sticky position to one of them at a time.

FlutterListView(
      delegate: FlutterListViewDelegate(
        (BuildContext context, int index) =>
            ListTile(title: Text('List Item ${elements[index]}')),
        childCount: elements.length,
        onItemSticky: (i) => i % 3 == 0,
      ),
    );

This is a sample code, not a real code.

Answer 1

Please try grouped_list https://pub.dev/packages/grouped_list library to add section.Here you can manage your own section builder. Hope this could help you.

Example

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
  ),

Answer 2

This works fine for me. Try grouped_list https://pub.dev/packages/grouped_list package with groupHeaderBuilder

GroupedListView<StaticChat, String>(
      controller: listScrollController,
      elements: widget.privateChat.messages,
      groupBy: (element) => element.date,
     groupHeaderBuilder: (element) => ListTile(
        leading: CircleAvatar(
          backgroundImage: NetworkImage(element.sentBy.profilePicture!),
        ),
        title: Text(element.date),
      ),
      indexedItemBuilder: (context, StaticChat element, index) =>
          chatBubble(element, index),
      itemComparator: (item1, item2) => item1.time.compareTo(item2.time),
      useStickyGroupSeparators: true,
      floatingHeader: true,
      order: GroupedListOrder.ASC,
    );