Grouped list package for Flutter.

Pub CI

Now with beta support for null safety!

A flutter ListView in which list items can be grouped to sections.

Features

  • Prerelease version with null safety support!
  • Easy creation of chat dialog.
  • List Items can be separated in groups.
  • For the groups an individual header can be set.
  • Almost all fields from ListView.builder available.

Getting Started

Add the package to your pubspec.yaml:

Lates stable:

 grouped_list: ^3.7.0

or: Prerelease with null safety support:

 grouped_list: ^4.0.0-nullsafety.0

In your dart file, import the library:

import 'package:grouped_list/grouped_list.dart';

Instead of using a ListView create a GroupedListView Widget:

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

Parameters:

NameDescriptionRequiredDefault value
elementsA list of the data you want to display in the listrequired-
groupByFunction which maps an element to its grouped valuerequired-
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-
groupSeparatorBuilder / groupHeaderBuilderFunction which returns an Widget which defines the group headers. While groupSeparatorBuilder gets the groupBy-value as parameter groupHeaderBuilder gets the whole element. If both are defined groupHeaderBuilder is preferredyes, either of them-
useStickyGroupSeparatorsWhen set to true the group header of the current visible group will stick on topnofalse
floatingHeaderWhether the sticky group header float over the list or occupy it's own spacenofalse
stickyHeaderBackgroundColorDefines the background color of the sticky header. Will only be used if useStickyGroupSeparators is usednoColor(0xffF7F7F7)
separatorA Widget which defines a separator between items inside a groupnono separator
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-
orderChange to GroupedListOrder.DESC to reverse the group sortingnoGroupedListOrder.ASC

Also the fields from ListView.builder can be used.

Highlight - Chat Dialog

Easy creation of chat dialogs. Just set the option reverse to true and order to GroupedListOrder.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.

My other packages :

For easy creation of chat-like dialogs:

Check out my other package StickyGroupedList, which is based on the scrollable_positioned_list.

Libraries

grouped_list