flutter_group_list_view

Description:

flutter group list view

FlutterGroupListView package for Flutter. #
Features #

List Items can be grouped.
Support ListView、SliverList.
Support header、footer for each group.
All fields from ListView.builder、SliverList.builder constructor available.

screenshot #

Getting Started #
Add the package to your pubspec.yaml:
flutter_group_list_view: ^1.0.3
copied to clipboard
In your dart file, import the library:
import 'package:flutter_group_list_view/flutter_group_list_view.dart';
copied to clipboard
Instead of using a ListView create a GroupListView Widget:
List _elements = [
{
"storeName": "ASICS Store",
"storeCode": "s01",
"goodsList": [{}, {}]
},
{
"storeName": "SALOMON Store",
"storeCode": "s02",
"goodsList": [{}]
},
{
"storeName": "ASICS Store",
"storeCode": "s01",
"goodsList": [{}, {}]
}
];

CustomScrollView(
slivers: [
GroupSliverListView(
sectionCount: _elements.length,
itemInSectionCount: (int section) {
return _elements[section]['goodsList'].length;
},
headerForSectionBuilder: (int section) {
return Container(
height: 40,
margin: const EdgeInsets.only(left: 12, right: 12, top: 10),
decoration: const BoxDecoration(
borderRadius: BorderRadius.only(topLeft: Radius.circular(10), topRight: Radius.circular(10)),
color: Colors.green,
),
child: const Row(
children: [Text("this is header")],
),
);
},
itemInSectionBuilder: (BuildContext context, IndexPath indexPath) {
return Container(
height: 90,
margin: const EdgeInsets.only(left: 12, right: 12),
color: Colors.white,
child: const Row(
children: [Text("this is item")],
),
);
},
separatorBuilder: (IndexPath indexPath) {
return Container(
height: 1,
color: Colors.grey,
);
},
footerForSectionBuilder: (int section) {
return Container(
height: 40,
margin: const EdgeInsets.only(left: 12, right: 12),
decoration: const BoxDecoration(
borderRadius: BorderRadius.only(bottomLeft: Radius.circular(10), bottomRight: Radius.circular(10)),
color: Colors.blue,
),
child: const Row(
children: [Text("this is footer")],
),
);
},
)
],
);
copied to clipboard
Parameters: #

sectionCount: The number of sections in the SliverListView. (required)
itemInSectionCount. Function which returns the number of items in a specified section. (required)
itemInSectionBuilder: Function which returns an Widget which defines the item at the specified IndexPath. itemBuilder provides the current section and index. (required)

itemInSectionBuilder: (BuildContext context, IndexPath indexPath) {
return Container(
height: 90,
margin: const EdgeInsets.only(left: 12, right: 12),
color: Colors.white,
child: const Row(
children: [Text("this is item")],
),
);
}
copied to clipboard

headerForSectionBuilder: 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.
footerForSectionBuilder: Function which returns an Widget which defines the section footer for each group.