Question 59463 in Telegram API Question posted in
A comprehensive official documentation can be found here.

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

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.
See this screenshot

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.

Tags:

2

Answers


  1. 0

    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
  ),
    Login or Signup to reply.
  2. 0

    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,
    );
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search