{"id":26857007,"url":"https://github.com/dimibe/grouped_list","last_synced_at":"2025-05-16T18:08:21.278Z","repository":{"id":39708980,"uuid":"201981470","full_name":"Dimibe/grouped_list","owner":"Dimibe","description":"A Flutter ListView in which items can be grouped into sections.","archived":false,"fork":false,"pushed_at":"2024-09-26T06:41:54.000Z","size":2987,"stargazers_count":419,"open_issues_count":58,"forks_count":105,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-31T00:30:58.248Z","etag":null,"topics":["dart","flutter","flutter-package"],"latest_commit_sha":null,"homepage":"https://pub.dev/packages/grouped_list","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/Dimibe.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":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-08-12T17:52:47.000Z","updated_at":"2025-01-27T06:18:32.000Z","dependencies_parsed_at":"2024-06-18T13:38:07.252Z","dependency_job_id":"54ea249e-6e05-4219-b8c5-1a7405df0215","html_url":"https://github.com/Dimibe/grouped_list","commit_stats":null,"previous_names":[],"tags_count":34,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dimibe%2Fgrouped_list","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dimibe%2Fgrouped_list/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dimibe%2Fgrouped_list/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dimibe%2Fgrouped_list/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Dimibe","download_url":"https://codeload.github.com/Dimibe/grouped_list/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247584112,"owners_count":20962075,"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":["dart","flutter","flutter-package"],"created_at":"2025-03-31T00:30:15.587Z","updated_at":"2025-04-07T03:19:47.572Z","avatar_url":"https://github.com/Dimibe.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Grouped list package for Flutter.\n[![pub package](https://img.shields.io/pub/v/grouped_list.svg)](https://pub.dev/packages/grouped_list)\n[![package publisher](https://img.shields.io/pub/publisher/grouped_list.svg)](https://pub.dev/packages/grouped_list)\n![build](https://github.com/Dimibe/grouped_list/actions/workflows/main.yaml/badge.svg??branch=main)\n \nA flutter `ListView` in which list items can be grouped to sections.\n\n\u003cimg src=\"https://raw.githubusercontent.com/Dimibe/grouped_list/main/assets/chat_example.png\" width=\"300\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/Dimibe/grouped_list/main/assets/example.png\" width=\"300\"\u003e\n\n#### Features\n* Sound null safety support!\n* Easy creation of chat dialog.\n* List Items can be separated in groups.\n* For the groups an individual header can be set.\n* Almost all fields from `ListView.builder` available.\n\n## Getting Started\n\nAdd the package to your pubspec.yaml:\n\n```yaml\n grouped_list: ^6.0.0\n ```\n \n In your dart file, import the library:\n\n ```Dart\nimport 'package:grouped_list/grouped_list.dart';\n ``` \n \n Instead of using a `ListView` create a `GroupedListView` Widget:\n \n ```Dart\n  GroupedListView\u003cdynamic, String\u003e(\n    elements: _elements,\n    groupBy: (element) =\u003e element['group'],\n    groupSeparatorBuilder: (String groupByValue) =\u003e Text(groupByValue),\n    itemBuilder: (context, dynamic element) =\u003e Text(element['name']),\n    itemComparator: (item1, item2) =\u003e item1['name'].compareTo(item2['name']), // optional\n    useStickyGroupSeparators: true, // optional\n    floatingHeader: true, // optional\n    order: GroupedListOrder.ASC, // optional\n    footer: Text(\"Widget at the bottom of list\"), // optional\n  ),\n```\n\n### Parameters:\n| Name                                                                                   | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                 | Required | Default value |\n|----------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----|----|\n| `elements`                                                                             | A list of the data you want to display in the list                                                                                                                                                                                                                                                                                                                                                                                                          | required | - |\n| `groupBy`                                                                              | Function which maps an element to its grouped value                                                                                                                                                                                                                                                                                                                                                                                                         | required | - |\n| `itemBuilder` / `indexedItemBuilder` / `interdependentItemBuilder` / `grouItemBuilder` | Function which returns an Widget which defines the item. \u003cbr/\u003e * `indexedItemBuilder` provides the current index as well. \u003cbr/\u003e * `interdependentItemBuilder` provides the previous and next items as well.\u003cbr/\u003e * `groupItemBuilder` provides information if the item is the first or last element inside a group. \u003cbr/\u003e`indexedItemBuilder` is preferred over `interdependentItemBuilder` and `interdependentItemBuilder` is preferred over`itemBuilder`. | yes, either of them | - |\n| `groupSeparatorBuilder` / `groupHeaderBuilder`                                         | Function which returns a Widget which defines the group headers. While `groupSeparatorBuilder` gets the `groupBy`-value as parameter `groupHeaderBuilder` gets the whole element. If both are defined `groupHeaderBuilder` is preferred                                                                                                                                                                                                                     | yes, either of them | - |\n| `groupStickyHeaderBuilder`                                                             | Function which returns a Widget which defines the sticky group header, when `useStickyGroupSeparators` is `true`. If not defined `groupSeparatorBuilder` or `groupHeaderBuilder` will be used as described above.                                                                                                                                                                                                                                           | no | - |\n| `useStickyGroupSeparators`                                                             | When set to true the group header of the current visible group will stick on top                                                                                                                                                                                                                                                                                                                                                                            | no | `false` |\n| `floatingHeader`                                                                       | Whether the sticky group header float over the list or occupy it's own space                                                                                                                                                                                                                                                                                                                                                                                | no | `false` |\n| `stickyHeaderBackgroundColor`                                                          | Defines the background color of the sticky header. Will only be used if `useStickyGroupSeparators` is used                                                                                                                                                                                                                                                                                                                                                  | no | `Color(0xffF7F7F7)` |\n| `separator`                                                                            | A Widget which defines a separator between items inside a group                                                                                                                                                                                                                                                                                                                                                                                             | no | no separator |\n| `groupComparator`                                                                      | Can be used to define a custom sorting for the groups. Otherwise the natural sorting order is used                                                                                                                                                                                                                                                                                                                                                          | no | - |\n| `itemComparator`                                                                       | Can be used to define a custom sorting for the elements inside each group. Otherwise the natural sorting order is used                                                                                                                                                                                                                                                                                                                                      | no | - |\n| `order`                                                                                | Change to `GroupedListOrder.DESC` to reverse the group sorting                                                                                                                                                                                                                                                                                                                                                                                              | no | `GroupedListOrder.ASC` |\n| `footer`                                                                               | Widget at the bottom of the list                                                                                                                                                                                                                                                                                                                                                                                                                            | no | - |\n\n**Also the fields from `ListView.builder` can be used.** \n\n\n#### Highlight - SilverGroupedList\n\nNow supporting a grouped list based on a silver list. Just use `SilverGroupedListView` instead of `GroupedListView`. An example can be found under `example/lib/example_silver`.\nNote that some options of the `GroupedListView` are currently not available in `SilverGroupedListView`.\n\n\n#### Highlight - Chat Dialog\n\nEasy creation of chat dialogs.\nJust set the option `reverse` to `true` and `order` to `GroupedListOrder.DESC`. A full example can be found in the examples.\nThe list will be scrolled to the end in the initial state and therefore scrolling will be against redeaing direction. \n\n\n### My other packages : \n\n**For easy creation of chat-like dialogs:**\n\nCheck out my other package [StickyGroupedList](https://pub.dev/packages/sticky_grouped_list), which is based on the scrollable_positioned_list.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdimibe%2Fgrouped_list","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdimibe%2Fgrouped_list","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdimibe%2Fgrouped_list/lists"}