Flutter Simple Grouped ListView #

See on pub.flutter-io.cn

simple_grouped_listview is a package that helps you display grouped item in a listview

Usecase #

Sometimes, you have a List<T> and you want to display it but with a particularity. T must be grouped somehow.

For example, T has a DateTime field and you want to group them under the day or the month or the year or even some mix.

Using this package, you'll be able to display your List<T> easily without doing much.

Features #

There are 4 main features exposed in this library.

• Custom Grouped ListView with a builder for the header and for the List of items
• List Grouped ListView with a builder for the header and for each item of the Lists
• Grid Grouped ListView with a builder for the header and for each item of the Grids
• Custom Grouped ListView with a builder for each group of items (header and List of items)

Using this 4 Widgets, you'll be able to do whatever you need to get some results like this:

Installation #

Dependency #

Add the package as a dependency in your pubspec.yaml file.

dependencies:
  simple_grouped_listview: "^1.0.0"

Import #

Import the package in your code file.

import 'package:simple_grouped_listview/simple_grouped_listview.dart';

Usage #

You can use the widget GroupedListView to create your listviews.

There are 3 available constructors for this widhet.

Mandatory params are

• items which is the List<T> that you want to display
• itemGrouper which is a H Function(T item), H being the header that is used to group your items. For example, if you want to group your T items with a DateTime field on the year, then item groupe can be itemGrouper: (T i) => T.dateTime.year.

Now you have 2 possibilities.

• Providing a headerBuilder and a listItemBuilder/gridItemBuilder/itemsBuilder that are builders that help creating the list
• Providing a customBuilder that will be in charge of building all the items (header and list included)

Moreover, you have 3 helpers to guide you

• GroupedListView.list() that displays your List<T> is a ListView
• GroupedListView.grid() that displays your List<T> is a GridView
• GroupedListView() that displays your List<T> is a ... your call !

Here are examples of each usage

Simple #

GroupedListView.list(
    items: List<int>.generate(100, (index) => index + 1),
    itemGrouper: (int i) => i.isEven,
    headerBuilder: (context, bool isEven) => Container(
        color: Colors.amber,
        child: Text(
            isEven ? 'Even' : 'Odd',
            style: const TextStyle(fontWeight: FontWeight.bold),
        ),
        padding: const EdgeInsets.all(16),
    ),
    listItemBuilder:
        (context, int countInGroup, int itemIndexInGroup, int item, int itemIndexInOriginalList) =>
            Container(
        child: Text(item.toRadixString(10), textAlign: TextAlign.center),
        padding: const EdgeInsets.all(8),
    ),
);

Using the GroupedListView.list() constructor, you have to provide a listItemBuilder to build the items, the ListView itself is handled by the package

Grid #

GroupedListView.grid(
    items: List<int>.generate(100, (index) => index + 1),
    itemGrouper: (int i) => i.isEven,
    headerBuilder: (context, bool isEven) => Container(
        color: Colors.amber,
        child: Text(
            isEven ? 'Even' : 'Odd',
            style: const TextStyle(fontWeight: FontWeight.bold),
        ),
        padding: const EdgeInsets.all(16),
    ),
    gridItemBuilder:
        (context, int countInGroup, int itemIndexInGroup, int item, int itemIndexInOriginalList) =>
            Container(
        child: Text(item.toRadixString(10), textAlign: TextAlign.center),
        padding: const EdgeInsets.all(8),
    ),
    crossAxisCount: 5,
);

Using the GroupedListView.grid() constructor, you have to provide a gridItemBuilder to build the items, the GridView itself is handled by the package Note that for the grid constructor, a crossAxisCount parameter is required

Custom #

GroupedListView(
    items: List<int>.generate(100, (index) => index + 1),
    headerBuilder: (context, bool isEven) => Container(
        child: Text(
            isEven ? 'Even' : 'Odd',
            style: const TextStyle(fontWeight: FontWeight.bold),
        ),
        padding: const EdgeInsets.all(16),
    ),
    itemsBuilder: (context, List<IndexedItem<int>> items) => ListView.builder(
        itemCount: items.length,
        shrinkWrap: true,
        physics: const NeverScrollableScrollPhysics(),
        itemBuilder: (context, int index) => Container(
            child: Text(items[index].item.toRadixString(10),
                textAlign: TextAlign.center),
            padding: const EdgeInsets.all(8),
        ),
    ),
    itemGrouper: (int i) => i.isEven,
);

Using the GroupedListView.grid() constructor, you have to provide a itemsBuilder to build the items, nothing is provided by the paclage so, here is an example with a ListView

sticky_header #

What if you want to use some other package like StickyHeaders, giving a headerBuilder and an itemBuilder won't work for this kind of package. No worries, you can use a specific constructor to do so.

GroupedListView(
    items: List<int>.generate(100, (index) => index + 1),
    customBuilder: (context, bool isEvenHeader, List<<IndexedItem<int>> items) => StickyHeader(
        header: Container(
        color: Colors.amber,
        child: Text(
            isEvenHeader ? 'Even' : 'Odd',
            style: const TextStyle(fontWeight: FontWeight.bold),
        ),
        padding: const EdgeInsets.all(16)),
        content: ListView.builder(
            itemCount: items.length,
            shrinkWrap: true,
            physics: const NeverScrollableScrollPhysics(),
            itemBuilder: (context, int index) => Container(
                child: Text(items[index].item.toRadixString(10),
                    textAlign: TextAlign.center),
                padding: const EdgeInsets.all(8),
            ),
        ),
    ),
    itemGrouper: (int i) => i.isEven,
)

Using the GroupedListView() with a customBuilder helps you manage your UI with what you want the customBuilder being a Function that gives you a BuildContext, a H (your header type) and a List<IndexedItem<T>>

Additional information #

Feel free to open an issue or contribute to this package ! Hope it helps you build awesome UI with flutter. See the example folder for examples of usage.