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.

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Share

• Share on Facebook
• Share on Twitter