Sticky grouped list package for Flutter.

Pub CI

A ListView with sticky headers in which list items can be grouped to sections. Based on scrollable_positioned_list.

Highlight - Chat Dialog

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.

Features

  • 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.

Getting Started

Add the package to your pubspec.yaml:

 sticky_grouped_list: ^1.2.0

In your dart file, import the library:

import 'package:sticky_grouped_list/sticky_grouped_list.dart';

Create a StickyGroupedListView Widget:

  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']),
    itemScrollController: GroupedItemScrollController(),
    order: StickyGroupedListOrder.ASC,
  ),

Parameters:

NameDescriptionRequiredDefault value
elementsA list of the data you want to display in the listrequired-
itemBuilder / indexedItemBuilderFunction which returns an Widget which defines the item. indexedItemBuilder provides the current index as well. If both are defined indexedItemBuilder is preferredyes, either of them-
groupByFunction which maps an element to its grouped valuerequired-
groupSeparatorBuilderFunction which gets a element and returns an Widget which defines the group header separatorrequired-
separatorA Widget which defines a separator between items inside a groupnono separator
floatingHeaderWhen set to true the sticky header will float over the listnofalse
stickyHeaderBackgroundColorDefines the background color of the sticky headernoColor(0xffF7F7F7)
itemScrollControllerInstead of an ItemScrollController a GroupedItemScrollController needs to be provided.no-
orderChange to StickyGroupedListOrder.DESC to reverse the group sortingnoStickyGroupedListOrder.ASC
groupComparatorCan be used to define a custom sorting for the groups. Otherwise the natural sorting order is usedno-
itemComparatorCan be used to define a custom sorting for the elements inside each group. Otherwise the natural sorting order is usedno-
reverseScrolls in opposite from reading direction (Starting at bottom and scrolling up). Same as in scrollable_positioned_list.nofalse

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.

Used packages:

Package nameCopyrightLicense
scrollable_positioned_listCopyright 2018 the Dart project authors, Inc. All rights reservedBSD 3-Clause "New" or "Revised" License

Libraries

sticky_grouped_list