grouped_scroll_view

Description:

grouped scroll view

grouped_scroll_view #


A package to display a grouped list of items. Provide a List, a grouper, and let it display it as a ListView, a GridView or anything else. Supports checkbox or radio in a scrollView.
Preview #














Getting Started #
Add the package to your pubspec.yaml:
dependencies:
grouped_scroll_view: <latest_version>
copied to clipboard
Features #

Support stickyHeader、customGrouper、 customHeader、customFooter
Support checkbox or radio in a scrollView

Usage #

grouped for grid view

GroupedScrollView.grid(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(mainAxisSpacing: 5, crossAxisSpacing: 5, crossAxisCount: widget.crossAxisCount),
groupedOptions: GroupedScrollViewOptions(
itemGrouper: (Person person) {
return person.birthYear;
},
stickyHeaderBuilder: (BuildContext context, int year, int groupedIndex) => Container(
color: Colors.white,
padding: const EdgeInsets.all(8),
constraints: const BoxConstraints.tightFor(height: 30),
child: Text(
'$year',
style: const TextStyle(fontWeight: FontWeight.bold),
),
)
),
itemBuilder: (BuildContext context, Person item) {
return Container(
color: Colors.lightGreen,
padding: const EdgeInsets.all(8),
constraints: const BoxConstraints.tightFor(width: 100),
child: Center(
child: Text(
item.name,
style: const TextStyle(fontWeight: FontWeight.bold),
),
),
);
},
data: DataCache.instance.persons,
headerBuilder: (BuildContext context) => Column(
children: const [
Divider(
thickness: 5,
),
Center(
child: Text(
'CustomHeader',
style: TextStyle(fontWeight: FontWeight.bold),
),
),
Divider(
thickness: 5,
),
],
),
footerBuilder: (BuildContext context) => Column(
children: const [
Divider(
thickness: 5,
),
Center(
child: Text(
'CustomFooter',
style: TextStyle(fontWeight: FontWeight.bold),
),
),
Divider(
thickness: 5,
),
],
),
)
copied to clipboard

grouped for list view

GroupedScrollView.list(
groupedOptions: GroupedScrollViewOptions(
itemGrouper: (Person person) {
return person.birthYear;
},
stickyHeaderBuilder: (BuildContext context, int year, int groupedIndex) => Container(
color: Colors.white,
padding: const EdgeInsets.all(8),
constraints: const BoxConstraints.tightFor(height: 30),
child: Text(
'$year',
style: const TextStyle(fontWeight: FontWeight.bold),
),
)),
itemBuilder: (BuildContext context, Person item) {
return Container(
constraints: const BoxConstraints.expand(height: 35),
child: Column(
children: [
Container(
constraints: const BoxConstraints.expand(height: 30),
color: Colors.lightGreen,
child: Center(
child: Text(
item.name,
style: const TextStyle(fontWeight: FontWeight.bold),
),
),
),
],
),
);
},
data: DataCache.instance.persons,
headerBuilder: (BuildContext context) => Column(
children: const [
Divider(
thickness: 5,
),
Center(
child: Text(
'CustomHeader',
style: TextStyle(fontWeight: FontWeight.bold),
),
),
Divider(
thickness: 5,
),
],
),
footerBuilder: (BuildContext context) => Column(
children: const [
Divider(
thickness: 5,
),
Center(
child: Text(
'CustomFooter',
style: TextStyle(fontWeight: FontWeight.bold),
),
),
Divider(
thickness: 5,
),
],
),
)
copied to clipboard
Additional information #

If the list needs to support checkbox or radio, please set toggleEnabled is true

final controller = GroupedToggleController(
toggleType: GroupedToggleType.checkbox,
onToggleChanged: (int idx, bool selected) {
// ...
},
toggleStyle: GroupedToggleStyle(),
);
GroupedScrollViewWithToggle.grid({
data: List<T>,
itemBuilder: (BuildContext context, T item) { /*...*/},
toggleController: controller,
toggleEnabled: true,
// ...
});

// dispose
controller.dispose();
copied to clipboard