https://github.com/kvs-coder/grouped_content_custom_scroll_view
GroupedContentCustomScrollView Widget. Build a beautiful Table based on Sliver Widgets with entries group by headers.
https://github.com/kvs-coder/grouped_content_custom_scroll_view
customscrollview dart flutter listview scroll sliver widget
Last synced: 2 months ago
JSON representation
GroupedContentCustomScrollView Widget. Build a beautiful Table based on Sliver Widgets with entries group by headers.
- Host: GitHub
- URL: https://github.com/kvs-coder/grouped_content_custom_scroll_view
- Owner: kvs-coder
- License: mit
- Created: 2020-08-19T19:40:11.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2021-11-13T20:41:31.000Z (over 3 years ago)
- Last Synced: 2025-03-29T23:41:12.647Z (3 months ago)
- Topics: customscrollview, dart, flutter, listview, scroll, sliver, widget
- Language: Dart
- Homepage:
- Size: 4.16 MB
- Stars: 5
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# sliver_grouped_list
SliverGroupedList Widget
Build a beautiful sliver with a custom header, footer and body, which can be divided by groups with a header for each group and a list of entries.
## Getting Started
- Go inside pubspec.yaml file
- Add this to your package's pubspec.yaml file:
``` Dart
dependencies:
sliver_grouped_list: ^1.0.4
```
- Run flutter pub get
## How to use
Go to your widget .dart file and do import
``` Dart
import 'package:sliver_grouped_list/sliver_grouped_list.dart';
```
Inside your widget's Widget build(BuildContext context) method
set as body the SliverGroupedList with explicitly showing the types of bodyHeader and bodyEntry.
``` Dart
// [Header] is the type of a group header
// [Entry] is the type of every entry in the list related to the group
body: SliverGroupedList()
```
Implement all required constructor parameters.
As a result the custom scroll view will contain the content of the passed data.
Optionally you may add a RenderObjectWidget widget like SliverGrid or SliverList header section to the scroll view, and a footer as well.
Here is an example which is displayed in the GIF from above.
``` Dart
import 'package:flutter/material.dart';
import 'package:sliver_grouped_list/sliver_grouped_list.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
static const double _kHeight = 150.0;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Example'),
),
body: SliverGroupedList(
data: {
'A': ['My best friend', 'Good friend of mine', 'Guy I do not know'],
'B': ['My cat', 'My dog', 'My fish', 'My bird'],
'C': ['My mom', 'My dad', 'My sis']
},
header: SliverGrid.count(
crossAxisCount: 3,
children: [
Container(color: Colors.white, height: _kHeight),
Container(color: Colors.black, height: _kHeight),
Container(color: Colors.grey, height: _kHeight),
Container(color: Colors.grey, height: _kHeight),
Container(color: Colors.white, height: _kHeight),
Container(color: Colors.black, height: _kHeight),
Container(color: Colors.black, height: _kHeight),
Container(color: Colors.grey, height: _kHeight),
Container(color: Colors.white, height: _kHeight),
],
),
bodyHeaderMinHeight: 60.0,
bodyHeaderMaxHeight: 100.0,
bodyHeaderPinned: true,
bodyHeaderFloating: false,
bodyHeaderBuilder: (_, header) => Container(
alignment: Alignment.center,
child: Text(
header,
style: TextStyle(color: Colors.white),
),
color: Colors.blue,
),
bodyPlaceholderBuilder: (_, header) => Card(
color: Colors.lightBlueAccent,
child: Container(
height: _kHeight,
alignment: Alignment.center,
child: Text(
"There are no items available",
style: TextStyle(color: Colors.grey),
))),
bodyEntryBuilder: (_, index, item) => GestureDetector(
onTap: () {
print(item);
print(index);
},
child: Card(
color: Colors.lightBlueAccent,
child: Container(
height: _kHeight,
alignment: Alignment.center,
child: Text(
item,
style: TextStyle(color: Colors.white),
))),
),
footer: SliverFixedExtentList(
itemExtent: _kHeight,
delegate: SliverChildListDelegate(
[
Container(color: Colors.black),
Container(color: Colors.white),
Container(color: Colors.grey),
Container(color: Colors.black),
Container(color: Colors.white),
Container(color: Colors.grey),
],
),
),
),
);
}
}
```
## License
Under MIT License
## Sponsorhip
If you think that my repo helped you to solve the issues you struggle with, please don't be shy and sponsor :-)