lulumeimei / sticky_grouped_list Goto Github PK

A ListView in which list items can be grouped to sections. Based on scrollable_positioned_list, which enables programatically scrolling of the list.

• Easy creation of chat-like interfaces.
• List items can be separated in groups.
• For the groups an individual header can be set.
• Sticky headers with floating option.
• All fields from ScrollablePositionedList available.

Add the package to your pubspec.yaml:

sticky_grouped_list: ^3.1.0

In your dart file, import the library:

import 'package:sticky_grouped_list/sticky_grouped_list.dart';

Create a StickyGroupedListView Widget:

 final GroupedItemScrollController itemScrollController = GroupedItemScrollController();

 StickyGroupedListView<dynamic, String>(
   elements: _elements,
   groupBy: (dynamic element) => element['group'],
   groupSeparatorBuilder: (dynamic element) => Text(element['group']),
   itemBuilder: (context, dynamic element) => Text(element['name']),
   itemComparator: (e1, e2) => e1['name'].compareTo(e2['name']), // optional
   elementIdentifier: (element) => element.name // optional - see below for usage
   itemScrollController: itemScrollController, // optional
   order: StickyGroupedListOrder.ASC, // optional
 );

If you are using the GroupedItemScrollController you can scroll or jump to an specific position in the list programatically:

1. By using the index, which will scroll to the element at position [index]:

  itemScrollController.scrollTo(index: 4, duration: Duration(seconds: 2));
  itemScrollController.jumpTo(index: 4);

2. By using a pre defined element identifier. The identifier is defined by a Function which takes one element and returns a unique identifier of any type. The methods scrollToElement and jumpToElement can be used to jump to an element by providing the elements identifier instead of the index:

  final GroupedItemScrollController itemScrollController = GroupedItemScrollController();

  StickyGroupedListView<dynamic, String>(
    elements: _elements,
    elementIdentifier: (element) => element.name
    itemScrollController: itemScrollController, 
    [...]
  );

  itemScrollController.scrollToElement(identifier: 'item-1', duration: Duration(seconds: 2));
  itemScrollController.jumpToElement(identifier: 'item-2');

GroupedItemScrollController.srollTo() and GroupedItemScrollController.jumpTo() automatic set the alignment so that the item is fully visible aligned under the group header. Both methods take automaticAlignment as a additional optional paramenter which needs to be set to true if alignment is specified.

Also the fields from ScrollablePositionedList.builder can be used.

Easy creation of chat-like dialogs. Just set the option reverse to true and the option order to StickyGroupedListOrder.DESC. A full example can be found in the examples. The list will be scrolled to the end in the initial state and therefore scrolling will be against redeaing direction.

TThe list views in the GroupedList package are based on the default flutter listview and the silver list. This package is based on the scrollable_positioned_list which enables the possibility to programatically scroll to certain positions in the list. So if you need the ability to programatically scroll the list use the this package otherwise I would recommend to use the GroupedList package.