Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/meetleev/flutter_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. Grouped by headers.
https://github.com/meetleev/flutter_grouped_scroll_view
checbox flutter gridview grouped-grid-view grouped-list-view listview radio widget
Last synced: 1 day ago
JSON representation
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. Grouped by headers.
- Host: GitHub
- URL: https://github.com/meetleev/flutter_grouped_scroll_view
- Owner: meetleev
- License: apache-2.0
- Created: 2022-08-27T12:51:08.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-11-03T11:06:23.000Z (5 days ago)
- Last Synced: 2024-11-03T12:17:46.133Z (5 days ago)
- Topics: checbox, flutter, gridview, grouped-grid-view, grouped-list-view, listview, radio, widget
- Language: Dart
- Homepage: https://pub.dev/packages/grouped_scroll_view
- Size: 30.7 MB
- Stars: 14
- Watchers: 1
- Forks: 3
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# grouped_scroll_view
[](https://pub.dev/packages/grouped_scroll_view)
[](https://pub.dev/packages/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`:
```yaml
dependencies:
grouped_scroll_view:
```
## Features
* Support stickyHeader、customGrouper、 customHeader、customFooter
* Support **checkbox** or **radio** in a scrollView
## Usage
* grouped for grid view
``` dart
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,
),
],
),
)
```
* grouped for list view
``` dart
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,
),
],
),
)
```
## Additional information
* If the list needs to support checkbox or radio, please set toggleEnabled is true
``` dart
final controller = GroupedToggleController(
toggleType: GroupedToggleType.checkbox,
onToggleChanged: (int idx, bool selected) {
// ...
},
toggleStyle: GroupedToggleStyle(),
);
GroupedScrollViewWithToggle.grid({
data: List,
itemBuilder: (BuildContext context, T item) { /*...*/},
toggleController: controller,
toggleEnabled: true,
// ...
});
// dispose
controller.dispose();
```