flutter_group_list_view 1.0.3 flutter_group_list_view: ^1.0.3 copied to clipboard
Flutter package for SliverList、ListView that allows you to group list items and support headers 、footers.
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
In your dart file, import the library:
import 'package:flutter_group_list_view/flutter_group_list_view.dart';
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")],
),
);
},
)
],
);
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 specifiedIndexPath
.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")],
),
);
}
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.