{"id":15527706,"url":"https://github.com/kvs-coder/grouped_content_custom_scroll_view","last_synced_at":"2026-01-11T04:43:34.117Z","repository":{"id":52990098,"uuid":"288821557","full_name":"kvs-coder/grouped_content_custom_scroll_view","owner":"kvs-coder","description":"GroupedContentCustomScrollView Widget. Build a beautiful Table based on Sliver Widgets with entries group by headers.","archived":false,"fork":false,"pushed_at":"2021-11-13T20:41:31.000Z","size":4360,"stargazers_count":5,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-29T23:41:12.647Z","etag":null,"topics":["customscrollview","dart","flutter","listview","scroll","sliver","widget"],"latest_commit_sha":null,"homepage":"","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kvs-coder.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-08-19T19:40:11.000Z","updated_at":"2023-12-08T11:37:57.000Z","dependencies_parsed_at":"2022-08-28T23:30:48.886Z","dependency_job_id":null,"html_url":"https://github.com/kvs-coder/grouped_content_custom_scroll_view","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kvs-coder%2Fgrouped_content_custom_scroll_view","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kvs-coder%2Fgrouped_content_custom_scroll_view/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kvs-coder%2Fgrouped_content_custom_scroll_view/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kvs-coder%2Fgrouped_content_custom_scroll_view/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kvs-coder","download_url":"https://codeload.github.com/kvs-coder/grouped_content_custom_scroll_view/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250433599,"owners_count":21429903,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["customscrollview","dart","flutter","listview","scroll","sliver","widget"],"created_at":"2024-10-02T11:08:40.154Z","updated_at":"2026-01-11T04:43:33.391Z","avatar_url":"https://github.com/kvs-coder.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"# sliver_grouped_list\n\nSliverGroupedList Widget\n\nBuild 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.\n\n\u003cimg src=\"assets/demo.gif\" width=\"250\" height=\"400\"/\u003e\n\n## Getting Started\n\n- Go inside pubspec.yaml file\n- Add this to your package's pubspec.yaml file: \n``` Dart\ndependencies:\n     sliver_grouped_list: ^1.0.4\n```\n- Run \u003cb\u003eflutter pub get\u003c/b\u003e\n\n## How to use\n\nGo to your widget .dart file and do import\n``` Dart\nimport 'package:sliver_grouped_list/sliver_grouped_list.dart';\n```\nInside your widget's \u003cb\u003eWidget build(BuildContext context)\u003c/b\u003e method\nset as body the \u003cb\u003eSliverGroupedList\u003c/b\u003e with explicitly showing the types of bodyHeader and bodyEntry.\n``` Dart\n// [Header] is the type of a group header\n// [Entry] is the type of every entry in the list related to the group\nbody: SliverGroupedList\u003cHeader, Entry\u003e()\n```\nImplement all required constructor parameters.\n\nAs a result the custom scroll view will contain the content of the passed data.\nOptionally you may add a \u003cb\u003eRenderObjectWidget\u003c/b\u003e widget like \u003cb\u003eSliverGrid\u003c/b\u003e or \u003cb\u003eSliverList\u003c/b\u003e header section to the scroll view, and a footer as well.\n\nHere is an example which is displayed in the GIF from above.\n\n``` Dart\nimport 'package:flutter/material.dart';\nimport 'package:sliver_grouped_list/sliver_grouped_list.dart';\n\nvoid main() {\n  runApp(MyApp());\n}\n\nclass MyApp extends StatelessWidget {\n  @override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      title: 'Flutter Demo',\n      theme: ThemeData(\n        primarySwatch: Colors.blue,\n        visualDensity: VisualDensity.adaptivePlatformDensity,\n      ),\n      home: MyHomePage(),\n    );\n  }\n}\n\nclass MyHomePage extends StatelessWidget {\n  static const double _kHeight = 150.0;\n\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      appBar: AppBar(\n        title: Text('Example'),\n      ),\n      body: SliverGroupedList\u003cString, String\u003e(\n        data: {\n          'A': ['My best friend', 'Good friend of mine', 'Guy I do not know'],\n          'B': ['My cat', 'My dog', 'My fish', 'My bird'],\n          'C': ['My mom', 'My dad', 'My sis']\n        },\n        header: SliverGrid.count(\n          crossAxisCount: 3,\n          children: [\n            Container(color: Colors.white, height: _kHeight),\n            Container(color: Colors.black, height: _kHeight),\n            Container(color: Colors.grey, height: _kHeight),\n            Container(color: Colors.grey, height: _kHeight),\n            Container(color: Colors.white, height: _kHeight),\n            Container(color: Colors.black, height: _kHeight),\n            Container(color: Colors.black, height: _kHeight),\n            Container(color: Colors.grey, height: _kHeight),\n            Container(color: Colors.white, height: _kHeight),\n          ],\n        ),\n        bodyHeaderMinHeight: 60.0,\n        bodyHeaderMaxHeight: 100.0,\n        bodyHeaderPinned: true,\n        bodyHeaderFloating: false,\n        bodyHeaderBuilder: (_, header) =\u003e Container(\n          alignment: Alignment.center,\n          child: Text(\n            header,\n            style: TextStyle(color: Colors.white),\n          ),\n          color: Colors.blue,\n        ),\n        bodyPlaceholderBuilder: (_, header) =\u003e Card(\n              color: Colors.lightBlueAccent,\n              child: Container(\n                  height: _kHeight,\n                  alignment: Alignment.center,\n                  child: Text(\n                    \"There are no items available\",\n                    style: TextStyle(color: Colors.grey),\n                  ))),\n        bodyEntryBuilder: (_, index, item) =\u003e GestureDetector(\n          onTap: () {\n            print(item);\n            print(index);\n          },\n          child: Card(\n              color: Colors.lightBlueAccent,\n              child: Container(\n                  height: _kHeight,\n                  alignment: Alignment.center,\n                  child: Text(\n                    item,\n                    style: TextStyle(color: Colors.white),\n                  ))),\n        ),\n        footer: SliverFixedExtentList(\n          itemExtent: _kHeight,\n          delegate: SliverChildListDelegate(\n            [\n              Container(color: Colors.black),\n              Container(color: Colors.white),\n              Container(color: Colors.grey),\n              Container(color: Colors.black),\n              Container(color: Colors.white),\n              Container(color: Colors.grey),\n            ],\n          ),\n        ),\n      ),\n    );\n  }\n}\n```\n## License\nUnder \u003ca href=https://github.com/VictorKachalov/sliver_grouped_list/blob/master/LICENSE\u003eMIT License\u003c/a\u003e\n\n## Sponsorhip\nIf you think that my repo helped you to solve the issues you struggle with, please don't be shy and sponsor :-)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkvs-coder%2Fgrouped_content_custom_scroll_view","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkvs-coder%2Fgrouped_content_custom_scroll_view","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkvs-coder%2Fgrouped_content_custom_scroll_view/lists"}