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.1.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']),
    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)
orderChange to StickyGroupedListOrder.DESC to reverse the group sortingnoStickyGroupedListOrder.ASC
itemScrollControllerInstead of an ItemScrollController a GroupedItemScrollController needs to be provided.no-
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