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

Daniel Ioannou

Last update: Nov 21, 2022

Related tags

Overview

GroupListView package for Flutter.

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

Features

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

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'],
 };
 
 GroupListView(
   sectionsCount: _elements.keys.toList().length,
   countOfItemInSection: (int section) {
     return _elements.values.toList()[section].length;
   },
   itemBuilder: (BuildContext context, IndexPath index) {
     return Text(
       _elements.values.toList()[index.section][index.index],
       style: TextStyle(color: Colors.white, fontSize: 18),
     );
   },
   groupHeaderBuilder: (BuildContext context, int section) {
     return Padding(
       padding: const EdgeInsets.symmetric(horizontal: 15, vertical: 8),
       child: Text(
         _elements.keys.toList()[section],
         style: TextStyle(fontSize: 18, fontWeight: FontWeight.w600),
       ),
     );
   },
   separatorBuilder: (context, index) => SizedBox(height: 10),
   sectionSeparatorBuilder: (context, section) => SizedBox(height: 10),
 );

Parameters:

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.

Contributions

Contributions of any kind are more than welcome! Feel free to fork and improve flutter_group_list_view in any way you want, make a pull request, or open an issue.

Comments

How to remove default horizontal padding?
How to remove default horizontal padding?

I config the padding as:

child: GroupListView( // padding: EdgeInsets.zero, padding: const EdgeInsets.symmetric(horizontal: 0, vertical: 4),

but it doesn't work.
help wanted
opened by TangSirOnGit 2
Add onTap functionality to the list item

How I can add onTap functionality to the list item? I am trying to add like this: onTap: () => Navigator.pushNamed(context, postRoutes[index]) but getting error: The argument type 'IndexPath' can't be assigned to the parameter type 'int'. Guide will be appreciated.
question

opened by shameemreza 2
Support sectionSeparatorBuilder
Hi, Currently separatorBuilder is used for separating items, It's nice if we have also sectionSeparatorBuilder to separate between sections.

Currently:

H1 Item1 ---- Item2 ---- H2 Item1 ---- Item2 ----

I wish:

H1 Item1 ---- Item2 ==== H2 Item1 ---- Item2 ===
opened by omidraha 2
Hope enough to use with CustomScrollView

This library is very friendly to iOS developers, unfortunately Sliver List is not supported. Hope to add a SilverGroupedListView to support Sliver List.

opened by 6ag 0
Adding Scrollbar generates Error

When wrapping the GroupListView inside a Scrollbar, I get an error

Flexible( child: Scrollbar( isAlwaysShown: true, child: GroupListView( controller: ScrollController(),

════════ Exception caught by animation library ═════════════════════════════════ The Scrollbar's ScrollController has no ScrollPosition attached. ════════════════════════════════════════════════════════════════════════════════

opened by YannickDesjardinsHapbee 0
How to get Map> _elements from rawQuery db

Hi my Sqlite returning rawQuery witch is Future<List<Map<String, dynamic>>> ... hot to conver result to map of type in example. Map<String, List> _elements = { 'Team A': ['Klay Lewis', 'Ehsan Woodard', 'River Bains'], 'Team B': ['Toyah Downs', 'Tyla Kane'], 'Team C': ['Marcus Romero', 'Farrah Parkes', 'Fay Lawson', 'Asif Mckay'], 'Team D': [ 'Casey Zuniga', 'Ayisha Burn', 'Josie Hayden', 'Kenan Walls', 'Mario Powers' ], 'Team Q': ['Toyah Downs', 'Tyla Kane', 'Toyah Downs'], };
question

opened by KlubAndroid 1

Releases(v1.1.1)

v1.1.1(Mar 10, 2021)
In this version:

Stable null-safe release

Source code(tar.gz)
Source code(zip)
v1.1.0(Mar 10, 2021)
In this version:

Migrated to null safety

Source code(tar.gz)
Source code(zip)
v1.0.6(Jul 22, 2020)
In this version:

Support sectionSeparatorBuilder

Separators only appear between sections: separator 0 appears after section 0 and the last separator appears after the last section.

Widget sectionSeparatorBuilder(BuildContext context, int section) { return SizedBox(height: 10); }
Source code(tar.gz)
Source code(zip)
v1.0.3(May 12, 2020)
In this version:

Improve build performance.

Source code(tar.gz)
Source code(zip)
v1.0.2(May 10, 2020)
In this version:

Update documentation.

Source code(tar.gz)
Source code(zip)
v1.0.1(May 8, 2020)
In this version:

Support all fields from ListView.builder constructor.

Source code(tar.gz)
Source code(zip)
v1.0.0(May 7, 2020)
In this version:

Initial developers preview release.

Source code(tar.gz)
Source code(zip)