GroupListView package for Flutter.

pub package

A ListView that allows you to group list items and support headers like iOS UITableView section.


  • List Items can be grouped.
  • Support headers for each group.
  • All fields from ListView.builder constructor available.

Getting Started

Add the package to your pubspec.yaml:

 group_list_view: ^1.0.6

In your dart file, import the library:

import 'package:group_list_view/group_list_view.dart';

Instead of using a ListView create a GroupListView Widget:

  Map<String, List> _elements = {
    'Team A': ['Klay Lewis', 'Ehsan Woodard', 'River Bains'],
    'Team B': ['Toyah Downs', 'Tyla Kane'],
    sectionsCount: _elements.keys.toList().length,
    countOfItemInSection: (int section) {
      return _elements.values.toList()[section].length;
    itemBuilder: (BuildContext context, IndexPath index) {
      return Text(
        style: TextStyle(color: Colors.white, fontSize: 18),
    groupHeaderBuilder: (BuildContext context, int section) {
      return Padding(
        padding: const EdgeInsets.symmetric(horizontal: 15, vertical: 8),
        child: Text(
          style: TextStyle(fontSize: 18, fontWeight: FontWeight.w600),
    separatorBuilder: (context, index) => SizedBox(height: 10),
    sectionSeparatorBuilder: (context, section) => SizedBox(height: 10),


  • sectionsCount: The number of sections in the ListView. (required)
  • countOfItemInSection. Function which returns the number of items(rows) in a specified section. (required)
  • itemBuilder: Function which returns an Widget which defines the item at the specified IndexPath. itemBuilder provides the current section and index. (required)
  Widget _itemBuilder(BuildContext context, IndexPath index) {
     return Text('${_elements[index.section][index.index]}');
  • groupHeaderBuilder: Function which returns an Widget which defines the section header for each group. (required)
  • separatorBuilder: Function which returns an Widget which defines the divider/separator at the specified IndexPath.

The itemBuilder and separatorBuilder callbacks should actually create widget instances when called.