GitLocker: The Coding Marketplace

Description:

simple grouped listview

Flutter Simple Grouped ListView #

See on pub.dev
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"
copied to clipboard
Import #
Import the package in your code file.
import 'package:simple_grouped_listview/simple_grouped_listview.dart';
copied to clipboard
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),
),
);
copied to clipboard

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,
);
copied to clipboard

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,
);
copied to clipboard

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,
)
copied to clipboard

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.