{"id":32271294,"url":"https://github.com/sinasys/items_selector","last_synced_at":"2026-02-21T08:02:16.240Z","repository":{"id":283877789,"uuid":"952986574","full_name":"SinaSys/items_selector","owner":"SinaSys","description":"📦 A Flutter package providing flexible item selection widgets with support for multiple layouts including list, grid, wrap, radio button, and checkbox list selectors, allowing you to choose the perfect selection style for your app's needs.","archived":false,"fork":false,"pushed_at":"2025-05-07T18:06:44.000Z","size":3807,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-22T22:49:20.918Z","etag":null,"topics":["checkbox-selector","custom-selection","grid-selector","item-selector","list-selector","multi-select","radio-selector","selector","single-select"],"latest_commit_sha":null,"homepage":"https://pub.dev/packages/items_selector","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SinaSys.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,"zenodo":null}},"created_at":"2025-03-22T10:00:23.000Z","updated_at":"2025-05-26T05:31:51.000Z","dependencies_parsed_at":"2025-04-10T19:27:30.582Z","dependency_job_id":"4d1942ae-987b-409f-87e2-3d71de74897d","html_url":"https://github.com/SinaSys/items_selector","commit_stats":null,"previous_names":["sinasys/items_selector"],"tags_count":8,"template":false,"template_full_name":null,"purl":"pkg:github/SinaSys/items_selector","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SinaSys%2Fitems_selector","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SinaSys%2Fitems_selector/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SinaSys%2Fitems_selector/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SinaSys%2Fitems_selector/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SinaSys","download_url":"https://codeload.github.com/SinaSys/items_selector/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SinaSys%2Fitems_selector/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29676981,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-21T06:23:40.028Z","status":"ssl_error","status_checked_at":"2026-02-21T06:23:39.222Z","response_time":107,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["checkbox-selector","custom-selection","grid-selector","item-selector","list-selector","multi-select","radio-selector","selector","single-select"],"created_at":"2025-10-22T22:48:56.530Z","updated_at":"2026-02-21T08:02:16.234Z","avatar_url":"https://github.com/SinaSys.png","language":"Dart","readme":"\n# Items Selector\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/SinaSys/items_selector/images/assets/images/other/main_image.png\" alt=\"Group 7\"\u003e\n\u003c/p\u003e\n\n\u003cbr\u003e\n\n# Introduction\nThis package provides a flexible and customizable solution for selecting items from a list. It supports both single and multi-selection modes, as well as the ability to define initial items (either fixed and non-selectable or selectable). The package offers versatile display options, including scrollable lists (horizontal or vertical), grid views, wrap-based layouts for dynamic multi-line arrangements, radio button lists with RadioSelector, and checkbox lists with CheckBoxSelector. Additionally, it is fully generic and supports all data types, making it adaptable to various use cases.\n\n\n\u003cbr\u003e\n\n\n# Features\n- Supports all primitive data types (e.g., int, String, etc.), enums, and custom classes.\n- Built-in state management handled by the package.\n- Provides both single-select and multi-select options.\n- Fully customizable widgets for selected and unselected states.\n- Displays scrollable lists horizontally or vertically.\n- Supports grid view and wrap-based layouts for flexible item arrangement.\n- Customizable RadioSelector and CheckBoxSelector widgets for item selection.\n- Ability to define initial items (selectable or non-selectable).\n- Animation support.\n\n\n\u003cbr\u003e\n\n\n# How to use\nIn a terminal, located at the root of your package, run this command:\n```dart\nflutter pub add items_selector\n```\n\n\n\u003cbr\u003e\n\n# Options\n## **SingleSelectOption**\n\n`SingleSelectOption` is used within the **ListSelector**, **GridSelector**, and **WrapSelector** widgets and includes two boolean properties:\n\n- **`allowUnselectedInitialItems`**  \n  When the `initialItems` property is set, enabling this option allows those initial items to be **unselected**.\n\n- **`allowUnselectedMainItems`**  \n  Enabling this option prevents the **main items** from being selected.\n\n\n| Row | Initial Items | Main Items | Allow Unselect Main Items | Allow Unselect Initial Items | Image | \n|:---:|:------------:|:---------:|:-----------------------:|:--------------------------:|:-----------------:|\n| 1  | Y | Y | Y | Y | ![1](https://raw.githubusercontent.com/SinaSys/items_selector/images/assets/images/options/single/1.gif)   |\n| 2  | Y | Y | Y | N | ![5](https://raw.githubusercontent.com/SinaSys/items_selector/images/assets/images/options/single/2.gif)   |\n| 3  | Y | Y | N | Y | ![9](https://raw.githubusercontent.com/SinaSys/items_selector/images/assets/images/options/single/3.gif)   |\n| 4  | Y | Y | N | N | ![13](https://raw.githubusercontent.com/SinaSys/items_selector/images/assets/images/options/single/4.gif)  |\n| 5  | N | Y | N | N | ![14](https://raw.githubusercontent.com/SinaSys/items_selector/images/assets/images/options/single/5.gif)  |\n\n\u003cbr\u003e\n\n## **MultiSelectOption**\n\n`MultiSelectOption` is used within the **ListSelector**, **GridSelector**, and **WrapSelector** widgets and includes two properties:\n\n- **`allowUnselectedInitialItems`**  \n  When the `initialItems` property is set, enabling this option allows those initial items to be **unselected**.\n\n- **`maxItems`**  \n  Defines the maximum number of items that can be selected.\n\n\n| Row | Initial Items | Main Items | Allow Unselect Initial Items | Max Items | Image |\n|:---:|:------------:|:--------:|:----------------------:|:---------:|:-----:|\n| 1  | Y | Y | Y | Y | ![6](https://raw.githubusercontent.com/SinaSys/items_selector/images/assets/images/options/multi/1.gif) |\n| 2  | Y | Y | N | Y | ![5](https://raw.githubusercontent.com/SinaSys/items_selector/images/assets/images/options/multi/2.gif) | \n| 3  | N | Y | N | Y | ![4](https://raw.githubusercontent.com/SinaSys/items_selector/images/assets/images/options/multi/3.gif) | \n| 4  | Y | Y | Y | N | ![3](https://raw.githubusercontent.com/SinaSys/items_selector/images/assets/images/options/multi/4.gif) |\n| 5  | Y | Y | N | N | ![2](https://raw.githubusercontent.com/SinaSys/items_selector/images/assets/images/options/multi/5.gif) |\n| 6  | N | Y | N | N | ![1](https://raw.githubusercontent.com/SinaSys/items_selector/images/assets/images/options/multi/6.gif) | \n\n\u003cbr\u003e\n\u003cbr\u003e\n\n## 📌 Widgets Overview  ( ListSelector | GridSelector | WrapSelector )\n\n**ListSelector, GridSelector, and WrapSelector** provide a flexible solution for selecting items from a collection, supporting both single and multi-selection modes.  \n\n### 📋 Widget Variants  \n\n| Widget Name       | Variants (Implemented in Library) |\n|------------------|--------------------------------|\n| **`ListSelector`** | `ListSelector()`, `ListSelector.builder()`, `ListSelector.separated()`, `ListSelector.wheel()` |\n| **`GridSelector`** | `GridSelector.builder()`, `GridSelector.count()`, `GridSelector.extent()` |\n| **`WrapSelector`** | `WrapSelector()` |\n\n---\n\n\u003cbr\u003e\n\n## 🖼️ Layout Differences  \n\n| Widget Type | Variants | Description |\n|-------------|-------------|-------------|\n| **📜 List-based Widgets** | `ListSelector()` | Uses `Row` or `Column` under the hood based on `direction`. |\n|  | `ListSelector.builder()` | Uses `ListView.builder` for dynamic item rendering. |\n|  | `ListSelector.separated()` | Uses `ListView.separated` with `separatorBuilder` for defining item separators. |\n|  | `ListSelector.wheel()` | Uses `ListWheelScrollView`. |\n| **🔲 Grid-based Widgets** | `GridSelector.builder()` | Uses a builder function for grid items. |\n|  | `GridSelector.count()` | Uses a fixed number of columns. |\n|  | `GridSelector.extent()` | Uses a maximum cross-axis extent for items. |\n| **🔀 Wrap-based Widget** | `WrapSelector()` | Provides automatic line breaks, single generative constructor (no named constructors). |\n\n---\n\n\u003cbr\u003e\n\n## 🔹 Common Properties (Available in All Widgets)  \n\n| Property          | Description  |\n|------------------|-------------|\n| **`items`** | Defines the available list of items. |\n| **`builder`** | Creates custom widgets for selected and unselected states via `selectedItem` and `unSelectedItem`. |\n| **`selectedItems`** | Returns the list of selected items when a selection is made. |\n| **`initialItems`** *(optional)* | Allows specifying pre-selected items at initialization. |\n| **`hasLongPress`** *(optional, default: `false`)* | Enables selection using a long press instead of a regular tap. |\n| **`options`** *(optional, default: `SingleSelectOption`)* | Defines selection behavior using `SingleSelectOption` or `MultiSelectOption`. |\n\n---\n\n\u003cbr\u003e\n\n## 🔹 Layout-Specific Properties  \n\n| Property | Available In | Description |\n|----------|-------------|-------------|\n| **`wrapConfiguration`** | `WrapSelector` | Configures `Wrap` properties like `alignment`, `spacing`, `runSpacing`, etc. |\n| **`listConfiguration`** | `ListSelector.builder`, `ListSelector.separated` | Provides access to `ListView` properties like scrolling behavior, physics, controllers, etc. |\n| **`separatorBuilder`** | `ListSelector.separated` | A required function that defines separators between list items. |\n| **`flexConfiguration`** | `ListSelector()` (Generative Constructor) | Used for configuring `Row` or `Column` properties (`MainAxisAlignment`, `CrossAxisAlignment`, etc.). |\n| **`wheelConfiguration`** | `ListSelector.wheel` | Configures `ListWheelScrollView` properties like `itemExtent`, `squeeze`, `perspective`, etc. |\n| **`direction`** | `ListSelector()`, `ListSelector.builder`, `ListSelector.separated` | Defines layout direction.  |\n|  | `ListSelector()` *(Generative Constructor)* | Default: `Axis.horizontal`. |\n|  | `ListSelector.builder`, `ListSelector.separated` | Default: `Axis.vertical`. |\n| **`BuilderConfiguration`** | `GridSelector.builder` | Similar to `GridView.builder`. |\n| **`CountConfiguration`** | `GridSelector.count` | Similar to `GridView.count`. |\n| **`ExtentConfiguration`** | `GridSelector.extent` | Similar to `GridView.extent`. |\n\n---\n\n\u003cbr\u003e\n\n## ⚙️ Selection Behavior  \n\n###  SingleSelectOptions\n\n| Option                      | Type    | Description                                                            |\n|-----------------------------|---------|------------------------------------------------------------------------|\n| `allowUnselectInitialItems` | `bool?` | If `true`, allows initial items to be unselected. Defaults to `false`.  |\n| `allowUnselectMainItems`    | `bool?` | If `true`, allows main items to be unselected. Defaults to `false`.     |\n\n\u003cbr\u003e\n\n###  MultiSelectOptions\n\n| Option                      | Type    | Description                                                                |\n|-----------------------------|---------|----------------------------------------------------------------------------|\n| `allowUnselectInitialItems` | `bool?` | If `true`, allows initial items to be unselected. Defaults to `false`.      |\n| `maxItems`                  | `int?`  | Limits the number of selectable items. If `null`, no limit is enforced.    |\n\n---\n\n\n\u003cbr\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\n\n## 📌 Widgets Overview  ( RadioSelector | CheckboxSelector )\n\n### ☑️ CheckBoxSelector\n\n**CheckBoxSelector** is a versatile Flutter widget that provides an easy-to-implement solution for multi-selection scenarios using checkboxes. Built on top of `CheckBoxListTile`, it offers a vertically arranged list of checkboxes with comprehensive customization options through both global settings (via `CheckBoxSelectorOption`) and individual item properties (via `CheckBoxSelectorItem`). The widget simplifies selection management by supporting initial selections, providing callback functions that return both selected items and their indices, and maintaining all the native functionality of `CheckBoxListTile` while adding convenient layout controls like spacing and alignment. Developers can quickly implement feature-rich checkbox lists where global styles can be defined while still allowing specific items to override these defaults as needed.\n\n## Properties\n\n| Property         | Type                              | Description                                                                 |\n|------------------|-----------------------------------|-----------------------------------------------------------------------------|\n| `items`          | `List\u003cCheckBoxSelectorItem\u003e`      | A list of `CheckBoxSelectorItem` objects representing the checkboxes. Each item extends `CheckboxListTile` and supports all its properties. |\n| `selectedItems`  | `void Function(List\u003cCheckBoxSelectorItem\u003e, List\u003cint\u003e index)` | A callback invoked when checkbox selections change, providing the list of selected items and their indices. |\n| `options`        | `CheckBoxSelectorOption?`         | Optional global configuration for all checkboxes, extending `CheckBoxSelectorItem` with additional layout properties like `spacing`, `mainAxisAlignment`, and `crossAxisAlignment`. |\n| `initialItems`   | `List\u003cint\u003e?`                      | Optional list of indices for initially selected items. Each index must be valid within the `items` list. |\n\n\n\u003cbr\u003e\n\n### 🔘 RadioSelector\n\n**RadioSelector** is a customizable Flutter widget for selecting a single item from a vertical list of radio buttons. It wraps `RadioListTile` with a structured API and accepts a list of `RadioSelectorItems`, each inheriting all properties of `RadioListTile`. A shared configuration can be applied using the `options` property (`RadioSelectorOption`), which defines common styling and layout values like `activeColor`, `tileColor`, and `spacing`. Individual item properties override these shared settings. The widget also supports an optional `initialItem` to preselect a radio, and returns the selected item and its index via the `selectedItems` callback.\n\n## Properties\n\n| Property         | Type                                    | Description                                                                 |\n|------------------|-----------------------------------------|-----------------------------------------------------------------------------|\n| `items`          | `List\u003cRadioSelectorItem\u003e`              | A list of `RadioSelectorItem` objects representing the radio buttons. Each item extends `RadioListTile` and supports all its properties. |\n| `selectedItems`  | `void Function(RadioSelectorItem,int index)` | A callback invoked when a radio button is selected, providing the selected item and its index. |\n| `options`        | `RadioSelectorOption?`                 | Optional global configuration for all radio buttons, extending `RadioSelectorItem` with additional layout properties like `spacing`, `mainAxisAlignment`, and `crossAxisAlignment`. |\n| `initialItem`    | `int?`                                 | Optional index of the initially selected item. Must be a valid index within the `items` list. |\n\n\n\n\u003cbr\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\n### ListSelector \n```dart\n         ListSelector\u003cYourDataType\u003e(\n                items: yourListOfItems,\n                //// If set to Axis.horizontal, Row is used; if set to Axis.vertical, Column is used.\n                direction: Axis.horizontal,\n                // Can be SingleSelectOptions() or MultiSelectOptions() based on your requirement\n                options: MultiSelectOptions(),\n                // Default is SingleSelectOptions\n                flexConfiguration: FlexConfiguration(\n                  // You can also pass other Row or Column properties like mainAxisAlignment, crossAxisAlignment, etc.\n                  spacing: 10.0,\n                ),\n                selectedItems: (List\u003cYourDataType\u003e selectedItems, _) {\n                  debugPrint(selectedItems.toString());\n                },\n                builder: (_, index) {\n                  return ItemSelector(\n                    selectedItem: yourDesiredWidget(),\n                    unSelectedItem: yourDesiredWidget(),\n                  );\n                },\n              )\n\n```\n\n```dart\n          ListSelector\u003cYourDataType\u003e.builder(\n            items: yourListOfItems,\n            direction: Axis.horizontal, // Set to Axis.horizontal or Axis.vertical based on layout preference\n            options: SingleSelectOptions(), // Can be SingleSelectOptions() or MultiSelectOptions() based on your requirement\n            listConfiguration: ListConfiguration(\n              shrinkWrap: true,\n              // You can also pass other ListView properties like physics, controller, etc.\n            ),\n            selectedItems: (List\u003cYourDataType\u003e selectedItems, _) {\n              debugPrint(selectedItems.toString());\n            },\n            builder: (_, index) {\n              return ItemSelector(\n                selectedItem: yourDesiredWidget(),\n                unSelectedItem: yourDesiredWidget(),\n              );\n            },\n          )\n\n```\n\n```dart\n        // Use ListSelector.separated if you need separators between items\n          ListSelector\u003cYourDataType\u003e.separated(\n            items: yourListOfItems,\n            direction: Axis.horizontal, // Set to Axis.horizontal or Axis.vertical based on layout preference\n            options: MultiSelectOptions(), // Can be SingleSelectOptions() or MultiSelectOptions() based on your requirement\n            listConfiguration: ListConfiguration(\n              shrinkWrap: true,\n              // You can also pass other ListView properties like physics, controller, etc.\n            ),\n            selectedItems: (List\u003cYourDataType\u003e selectedItems, _) {\n              debugPrint(selectedItems.toString());\n            },\n            separatorBuilder: (_, index) {\n              return yourDesiredWidget();\n            },\n            builder: (_, index) {\n              return ItemSelector(\n                selectedItem: yourDesiredWidget(),\n                unSelectedItem: yourDesiredWidget(),\n              );\n            },\n          )\n\n\n```\n```dart\n              ListSelector\u003cYourDataType\u003e.wheel(\n                  items: yourListOfItems,\n                  wheelConfiguration: WheelConfiguration(\n                    // You can also pass other ListWheelScrollView properties like squeeze, controller, etc.\n                    itemExtent: 60,\n                    diameterRatio: 3.0,\n                    perspective: 0.01,\n                  ),\n                  // Can be SingleSelectOptions() or MultiSelectOptions() based on your requirement\n                  options: MultiSelectOptions(),\n                  selectedItems: (List\u003cYourDataType\u003e selectedItems, _) {\n                    debugPrint(selectedItems.toString());\n                  },\n                  builder: (_, index) {\n                    return ItemSelector(\n                      selectedItem: yourDesiredWidget(),\n                      unSelectedItem: yourDesiredWidget(),\n                    );\n                  },\n                )\n```\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/SinaSys/items_selector/images/assets/images/widgets/list_selector/single_select_int.gif\" width=\"32%\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/SinaSys/items_selector/images/assets/images/widgets/list_selector/single_select_object.gif\" width=\"32%\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/SinaSys/items_selector/images/assets/images/widgets/list_selector/multi_select_enum.gif\" width=\"32%\"\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/SinaSys/items_selector/images/assets/images/widgets/list_selector/list_wheel_multi_select.gif\" width=\"32%\"\u003e\n\u003c/p\u003e\n\n\n\u003cbr\u003e\n\n\n### GridSelector \n\n```dart\n           GridSelector\u003cyourDataType\u003e.builder(\n              items: yourListOfItems,\n              // Can be SingleSelectOptions() or MultiSelectOptions() based on your requirement\n              // options: SingleSelectOptions(),  // Default is SingleSelectOptions\n              builderConfiguration: BuilderConfiguration(\n                // You can also pass other GridView.builder properties like physics, controller, etc.\n                gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(\n                  maxCrossAxisExtent: 120.0,\n                  crossAxisSpacing: 10.0,\n                  mainAxisSpacing: 10.0,\n                ),\n                shrinkWrap: true,\n              ),\n              selectedItems: (List\u003cyourDataType\u003e selectedItems, _) {\n                debugPrint(selectedItems.toString());\n              },\n              builder: (_, index) {\n                return ItemSelector(\n                  selectedItem: yourDesireWidget(),\n                  unSelectedItem: yourDesireWidget(),\n                );\n              },\n            ),\n\n```\n\n```dart\n           GridSelector\u003cyourDataType\u003e.count(\n              items: yourListOfItems,\n              // Can be SingleSelectOptions() or MultiSelectOptions() based on your requirement\n              // options: MultiSelectOptions(),  // Default is SingleSelectOptions\n              countConfiguration: CountConfiguration(\n                // You can also pass other GridView.count properties like physics, controller, etc.\n                crossAxisCount: 3,\n                shrinkWrap: true,\n              ),\n              selectedItems: (List\u003cyourDataType\u003e selectedItems, _) {\n                debugPrint(selectedItems.toString());\n              },\n              builder: (_, index) {\n                return ItemSelector(\n                  selectedItem: yourDesireWidget(),\n                  unSelectedItem: yourDesireWidget(),\n                );\n              },\n            )\n\n```\n\n```dart\n          GridSelector\u003cyourDataType\u003e.extent(\n              items: yourListOfItems,\n              // Can be SingleSelectOptions() or MultiSelectOptions() based on your requirement\n              // options: MultiSelectOptions(),  // Default is SingleSelectOptions\n              extentConfiguration: ExtentConfiguration(\n                // You can also pass other GridView.extent properties like physics, controller, etc.\n                maxCrossAxisExtent: 150,\n                mainAxisSpacing: 10,\n                crossAxisSpacing: 10,\n                shrinkWrap: true,\n              ),\n\n              selectedItems: (List\u003cyourDataType\u003e selectedItems, _) {\n                debugPrint(selectedItems.toString());\n              },\n              builder: (_, index) {\n                return ItemSelector(\n                  selectedItem: yourDesireWidget(),\n                  unSelectedItem: yourDesireWidget(),\n                );\n              },\n            )\n\n```\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/SinaSys/items_selector/images/assets/images/widgets/grid_selector/multi_select_double.gif\" width=\"32%\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/SinaSys/items_selector/images/assets/images/widgets/grid_selector/multi_select_object.gif\" width=\"32%\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/SinaSys/items_selector/images/assets/images/widgets/grid_selector/single_select_enum.gif\" width=\"32%\"\u003e\n\u003c/p\u003e\n\n\u003cbr\u003e\n\n\n### WrapSelector\n\n```dart\n       WrapSelector\u003cyourDataType\u003e(\n          items: yourListOfItems,\n          // Can be SingleSelectOptions() or MultiSelectOptions() based on your requirement\n          // options: MultiSelectOptions(),  // Default is SingleSelectOptions\n          wrapConfiguration: WrapConfiguration(\n            // You can also pass other wrap properties like runAlignment, crossAxisAlignment, etc.\n            spacing: 10,\n            runSpacing: 20.0,\n          ),\n          selectedItems: (List\u003cyourDataType\u003e selectedItems, _) {\n            debugPrint(selectedItems.toString());\n          },\n          builder: (_, index) {\n            return ItemSelector(\n              selectedItem: yourDesireWidget(),\n              unSelectedItem: yourDesireWidget(),\n            );\n          },\n        )\n```\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/SinaSys/items_selector/images/assets/images/widgets/single_wrap_item/single_wrap_item.gif\"\u003e\n\u003c/p\u003e\n\n\n\u003cbr\u003e\n\n### RadioSelector\n\n```dart\n     RadioSelector(\n            options: RadioSelectorOption(\n              fillColor: WidgetStateProperty.all(Colors.white70),\n              spacing: 2.0,\n              mainAxisAlignment: MainAxisAlignment.center,\n            ),\n            items: [\n              RadioSelectorItem(\n                title: Text(\"Dart\"),\n                subtitle: Text(\n                  \"Client-optimized language used with Flutter\",\n                  style: style,\n                ),\n                tileColor: Color(0xFF0175C2),\n              ),\n              RadioSelectorItem(\n                title: Text(\"Kotlin\"),\n                subtitle: Text(\n                  \"Modern language for Android development\",\n                  style: style,\n                ),\n                tileColor: Color(0xFFFF5722),\n                secondary: Icon(\n                  Icons.android,\n                  color: Colors.white,\n                ),\n              ),\n            ],\n            selectedItems: (selectedItems, indexes) {\n              debugPrint(selectedItems.toString());\n              debugPrint(indexes.toString());\n            },\n          )\n\n```\n\n\u003cbr\u003e\n\n### CheckboxSelector\n\n```dart\n    CheckBoxSelector(\n        initialItems: [3,4],\n        selectedItems: (selectedItems, indexes) {\n          debugPrint(selectedItems.toString());\n          debugPrint(indexes.toString());\n        },\n        options: CheckBoxSelectorOption(\n          mainAxisAlignment: MainAxisAlignment.center,\n          controlAffinity: ListTileControlAffinity.leading,\n          fillColor: WidgetStateProperty.all(Colors.black26),\n        ),\n        items: [\n          CheckBoxSelectorItem(\n            title: Text(\"Dart\", style: style),\n            subtitle: Text(\n              \"Client-optimized language used with Flutter\",\n              style: style,\n            ),\n            tileColor: Color(0xFF0175C2),\n          ),\n          CheckBoxSelectorItem(\n            title: Text(\"Kotlin\", style: style),\n            subtitle: Text(\n              \"Modern language for Android development\",\n              style: style,\n            ),\n            tileColor: Color(0xFFFF5722),\n            secondary: Icon(\n              Icons.android,\n              color: Colors.white,\n            ),\n          ),\n        ],\n      )\n\n```\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/SinaSys/items_selector/images/assets/images/widgets/radio_selector/radio_selector.gif\" width=\"32%\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/SinaSys/items_selector/images/assets/images/widgets/checkbox_selector/checkbox_selector.gif\" width=\"32%\"\u003e\n\u003c/p\u003e\n\n\n\u003cbr\u003e\n\u003cbr\u003e\n\n# Examples\n\n| Widget                     | Example | \n|:--------------------------:|:--------------:|\n| ListSelector               | [code](https://github.com/SinaSys/items_selector/tree/master/example/lib/list_selector)            | \n| GridSelector               |  [code](https://github.com/SinaSys/items_selector/tree/master/example/lib/grid_selector)           | \n| WrapSelector               |  [code](https://github.com/SinaSys/items_selector/tree/master/example/lib/wrap_selector)           | \n| RadioSelector              |  [code](https://github.com/SinaSys/items_selector/tree/master/example/lib/radio_selector)          | \n| CheckBoxSelector           |  [code](https://github.com/SinaSys/items_selector/tree/master/example/lib/checkbox_selector)       | \n\n\n\u003cbr\u003e\n\n| Options                     | Example | \n|:--------------------------:|:--------------:|\n| SingleSelectOptions    | [code](https://github.com/SinaSys/items_selector/blob/master/example/lib/options/single_option_example.dart)             | \n| MultiSelectOptions     |  [code](https://github.com/SinaSys/items_selector/blob/master/example/lib/options/multi_option_example.dart)           | \n\n\n\u003cbr\u003e\n\u003cbr\u003e\n\n\n## ⚠️ Troubleshooting\n\n### Issue: `initialItems` Not Working for Custom Classes (ListSelector, GridSelector, or WrapSelector)\nIf you use a **custom class** as the item type and set the `initialItems` property, you might notice that the initial items are **not selected** when the app runs. This happens because **Dart uses reference equality by default**, meaning it does not automatically recognize two objects as equal even if their properties have the same values.\n\n### ✅ Solution 1: Override `==` Operator and `hashCode`\nTo ensure Dart correctly identifies equal objects, override the **equality (`==`) operator** and **hashCode** in your custom class:\n\n```dart\nclass CustomItem {\n  final int id;\n  final String name;\n\n  CustomItem(this.id, this.name);\n\n  @override\n  bool operator ==(Object other) =\u003e\n          identical(this, other) || (other is CustomItem \u0026\u0026 other.id == id \u0026\u0026 other.name == name);\n\n  @override\n  int get hashCode =\u003e id.hashCode ^ name.hashCode;\n}\n```\n\n### ✅ Solution 2: Use the equatable Package\nInstead of manually overriding == and hashCode, you can use the **equatable** package to simplify equality checks.\n\n1️⃣ **Add `equatable` to your dependencies:**\n```dart\nflutter pub add equatable\n```\n2️⃣ Modify your custom class to extend `equatable`:\n\n```dart\nimport 'package:equatable/equatable.dart';\n\nclass CustomItem extends Equatable {\n  final int id;\n  final String name;\n\n  const CustomItem(this.id, this.name);\n\n  @override\n  List\u003cObject\u003e get props =\u003e [id, name];\n}\n\n```\n\nWith **Equatable**, Dart will automatically handle equality comparisons, ensuring `initialItems` work correctly! 🎯\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsinasys%2Fitems_selector","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsinasys%2Fitems_selector","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsinasys%2Fitems_selector/lists"}