{"id":18494418,"url":"https://github.com/meetleev/flutter_grouped_scroll_view","last_synced_at":"2025-04-08T22:31:16.936Z","repository":{"id":58004522,"uuid":"529584462","full_name":"meetleev/flutter_grouped_scroll_view","owner":"meetleev","description":"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.","archived":false,"fork":false,"pushed_at":"2024-11-03T13:38:32.000Z","size":32242,"stargazers_count":15,"open_issues_count":3,"forks_count":3,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-23T18:54:11.366Z","etag":null,"topics":["checbox","flutter","gridview","grouped-grid-view","grouped-list-view","listview","radio","widget"],"latest_commit_sha":null,"homepage":"https://pub.dev/packages/grouped_scroll_view","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/meetleev.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-08-27T12:51:08.000Z","updated_at":"2025-02-07T02:48:01.000Z","dependencies_parsed_at":"2023-01-24T01:31:17.509Z","dependency_job_id":"b24ec0c9-9e1c-4e4d-b55f-6cd39c04a40a","html_url":"https://github.com/meetleev/flutter_grouped_scroll_view","commit_stats":{"total_commits":53,"total_committers":1,"mean_commits":53.0,"dds":0.0,"last_synced_commit":"a03d516a4ede7a9043daeab22db88357870e0199"},"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meetleev%2Fflutter_grouped_scroll_view","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meetleev%2Fflutter_grouped_scroll_view/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meetleev%2Fflutter_grouped_scroll_view/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meetleev%2Fflutter_grouped_scroll_view/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/meetleev","download_url":"https://codeload.github.com/meetleev/flutter_grouped_scroll_view/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247940106,"owners_count":21021908,"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":["checbox","flutter","gridview","grouped-grid-view","grouped-list-view","listview","radio","widget"],"created_at":"2024-11-06T13:19:37.962Z","updated_at":"2025-04-08T22:31:11.922Z","avatar_url":"https://github.com/meetleev.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"# grouped_scroll_view\n[![Pub](https://img.shields.io/pub/v/grouped_scroll_view.svg?style=flat-square)](https://pub.dev/packages/grouped_scroll_view)\n[![support](https://img.shields.io/badge/platform-android%20|%20ios%20|%20web%20|%20macos%20|%20windows%20|%20linux%20-blue.svg)](https://pub.dev/packages/grouped_scroll_view)\n\nA 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.\n## Preview\n\n\u003ctable\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003cimg width=\"130px\" src=\"https://github.com/meetleev/static_resources/raw/main/grouped_scroll_view/grouped_grid.gif\" alt=\"\"/\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003cimg width=\"130px\" src=\"https://github.com/meetleev/static_resources/raw/main/grouped_scroll_view/grouped_list.gif\" alt=\"\"/\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003cimg width=\"130px\" src=\"https://github.com/meetleev/static_resources/raw/main/grouped_scroll_view/grid_toggle_edit.gif\" alt=\"\"/\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003cimg width=\"130px\" src=\"https://github.com/meetleev/static_resources/raw/main/grouped_scroll_view/list_toggle_edit.gif\" alt=\"\"/\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003cimg width=\"130px\" src=\"https://github.com/meetleev/static_resources/raw/main/grouped_scroll_view/grouped_grid_checkbox.gif\" alt=\"\"/\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003cimg width=\"130px\" src=\"https://github.com/meetleev/static_resources/raw/main/grouped_scroll_view/grouped_list_radio.gif\" alt=\"\"/\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003cimg width=\"130px\" src=\"https://github.com/meetleev/static_resources/raw/main/grouped_scroll_view/grid_checkbox.gif\" alt=\"\"/\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003cimg width=\"130px\" src=\"https://github.com/meetleev/static_resources/raw/main/grouped_scroll_view/list_radio.gif\" alt=\"\"/\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n\u003c/table\u003e\n\n\n## Getting Started\n\nAdd the package to your `pubspec.yaml`:\n\n```yaml\ndependencies:\n  grouped_scroll_view: \u003clatest_version\u003e\n```\n\n## Features\n* Support stickyHeader、customGrouper、 customHeader、customFooter\n* Support **checkbox** or **radio** in a scrollView\n\n## Usage\n* grouped for grid view\n``` dart\nGroupedScrollView.grid(\n        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(mainAxisSpacing: 5, crossAxisSpacing: 5, crossAxisCount: widget.crossAxisCount),\n        groupedOptions: GroupedScrollViewOptions(\n                itemGrouper: (Person person) {\n                  return person.birthYear;\n                },\n                stickyHeaderBuilder: (BuildContext context, int year, int groupedIndex) =\u003e Container(\n                      color: Colors.white,\n                      padding: const EdgeInsets.all(8),\n                      constraints: const BoxConstraints.tightFor(height: 30),\n                      child: Text(\n                        '$year',\n                        style: const TextStyle(fontWeight: FontWeight.bold),\n                      ),\n                    )\n            ),\n        itemBuilder: (BuildContext context, Person item) {\n          return Container(\n            color: Colors.lightGreen,\n            padding: const EdgeInsets.all(8),\n            constraints: const BoxConstraints.tightFor(width: 100),\n            child: Center(\n              child: Text(\n                item.name,\n                style: const TextStyle(fontWeight: FontWeight.bold),\n              ),\n            ),\n          );\n        },\n        data: DataCache.instance.persons,\n        headerBuilder: (BuildContext context) =\u003e Column(\n          children: const [\n            Divider(\n              thickness: 5,\n            ),\n            Center(\n              child: Text(\n                'CustomHeader',\n                style: TextStyle(fontWeight: FontWeight.bold),\n              ),\n            ),\n            Divider(\n              thickness: 5,\n            ),\n          ],\n        ),\n        footerBuilder: (BuildContext context) =\u003e Column(\n          children: const [\n            Divider(\n              thickness: 5,\n            ),\n            Center(\n              child: Text(\n                'CustomFooter',\n                style: TextStyle(fontWeight: FontWeight.bold),\n              ),\n            ),\n            Divider(\n              thickness: 5,\n            ),\n          ],\n        ),\n      )\n```\n\n* grouped for list view\n``` dart\n    GroupedScrollView.list(\n            groupedOptions: GroupedScrollViewOptions(\n            itemGrouper: (Person person) {\n              return person.birthYear;\n            },\n            stickyHeaderBuilder: (BuildContext context, int year, int groupedIndex) =\u003e Container(\n                  color: Colors.white,\n                  padding: const EdgeInsets.all(8),\n                  constraints: const BoxConstraints.tightFor(height: 30),\n                  child: Text(\n                    '$year',\n                    style: const TextStyle(fontWeight: FontWeight.bold),\n                  ),\n                )),\n            itemBuilder: (BuildContext context, Person item) {\n              return Container(\n                constraints: const BoxConstraints.expand(height: 35),\n                child: Column(\n                  children: [\n                    Container(\n                      constraints: const BoxConstraints.expand(height: 30),\n                      color: Colors.lightGreen,\n                      child: Center(\n                        child: Text(\n                          item.name,\n                          style: const TextStyle(fontWeight: FontWeight.bold),\n                        ),\n                      ),\n                    ),\n                  ],\n                ),\n              );\n            },\n            data: DataCache.instance.persons,\n            headerBuilder: (BuildContext context) =\u003e Column(\n              children: const [\n                Divider(\n                  thickness: 5,\n                ),\n                Center(\n                  child: Text(\n                    'CustomHeader',\n                    style: TextStyle(fontWeight: FontWeight.bold),\n                  ),\n                ),\n                Divider(\n                  thickness: 5,\n                ),\n              ],\n            ),\n            footerBuilder: (BuildContext context) =\u003e Column(\n              children: const [\n                Divider(\n                  thickness: 5,\n                ),\n                Center(\n                  child: Text(\n                    'CustomFooter',\n                    style: TextStyle(fontWeight: FontWeight.bold),\n                  ),\n                ),\n                Divider(\n                  thickness: 5,\n                ),\n              ],\n            ),\n          )\n```\n## Additional information\n* If the list needs to support checkbox or radio, please set toggleEnabled is true\n``` dart\nfinal controller = GroupedToggleController(\n        toggleType: GroupedToggleType.checkbox,\n        onToggleChanged: (int idx, bool selected) {\n          // ...\n        },\n        toggleStyle: GroupedToggleStyle(),\n    );\nGroupedScrollViewWithToggle.grid({\n    data: List\u003cT\u003e,\n    itemBuilder: (BuildContext context, T item) { /*...*/},\n    toggleController: controller,\n    toggleEnabled: true,\n    // ...\n});\n\n// dispose\ncontroller.dispose();\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmeetleev%2Fflutter_grouped_scroll_view","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmeetleev%2Fflutter_grouped_scroll_view","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmeetleev%2Fflutter_grouped_scroll_view/lists"}