{"id":13551518,"url":"https://github.com/davigmacode/flutter_smart_select","last_synced_at":"2025-04-03T23:11:34.335Z","repository":{"id":41300915,"uuid":"223947895","full_name":"davigmacode/flutter_smart_select","owner":"davigmacode","description":"SmartSelect allows you to easily convert your usual form select or dropdown into dynamic page, popup dialog, or sliding bottom sheet with various choices input such as radio, checkbox, switch, chips, or even custom input. Supports single and multiple choice.","archived":false,"fork":false,"pushed_at":"2023-10-03T12:52:26.000Z","size":53477,"stargazers_count":406,"open_issues_count":1,"forks_count":260,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-03-27T22:13:20.805Z","etag":null,"topics":["checkbox","choice","dart","dropdown","flutter","flutter-package","multiple-choice","radio","select","single-choice","sticky-headers","switch","widget"],"latest_commit_sha":null,"homepage":"https://pub.dev/packages/smart_select","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/davigmacode.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}},"created_at":"2019-11-25T12:51:05.000Z","updated_at":"2025-02-15T20:17:58.000Z","dependencies_parsed_at":"2023-02-16T05:45:19.616Z","dependency_job_id":"69de3767-5afc-409c-9989-2b5ea3da5efc","html_url":"https://github.com/davigmacode/flutter_smart_select","commit_stats":{"total_commits":118,"total_committers":2,"mean_commits":59.0,"dds":0.03389830508474578,"last_synced_commit":"ae57fc417f6dd9e0371a6535e7f859ad13e37d91"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davigmacode%2Fflutter_smart_select","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davigmacode%2Fflutter_smart_select/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davigmacode%2Fflutter_smart_select/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davigmacode%2Fflutter_smart_select/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/davigmacode","download_url":"https://codeload.github.com/davigmacode/flutter_smart_select/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247092394,"owners_count":20882218,"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":["checkbox","choice","dart","dropdown","flutter","flutter-package","multiple-choice","radio","select","single-choice","sticky-headers","switch","widget"],"created_at":"2024-08-01T12:01:49.728Z","updated_at":"2025-04-03T23:11:34.316Z","avatar_url":"https://github.com/davigmacode.png","language":"Dart","readme":"![Pub Version](https://img.shields.io/pub/v/smart_select) ![GitHub](https://img.shields.io/github/license/davigmacode/flutter_smart_select)\n\n\u003ca href=\"https://www.buymeacoffee.com/davigmacode\" target=\"_blank\"\u003e\u003cimg src=\"https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png\" alt=\"Buy Me A Coffee\" width=\"195\" height=\"55\"\u003e\u003c/a\u003e\n\n\u003e [!IMPORTANT]\n\u003e\n\u003e Hi everyone,\n\u003e\n\u003e I'm sorry to announce that I'm no longer maintaining the [smart_select](https://pub.dev/packages/smart_select) package. It's been a great project, but it's become too difficult to maintain.\n\u003e\n\u003e In its place, I've released a new package called [choice](https://pub.dev/packages/choice). The combination to [smart_select](https://pub.dev/packages/smart_select) and [chips_choice](https://pub.dev/packages/chips_choice) with cleaner, more flexible, and composable API for creating inline or prompted choice widgets with single or multiple selection.\n\u003e\n\u003e I hope you'll check out [choice](https://pub.dev/packages/choice). I think you'll find it to be a great replacement for [smart_select](https://pub.dev/packages/smart_select).\n\u003e\n\u003e Thanks for your understanding.\n\nSmartSelect allows you to easily convert your usual form select or dropdown into dynamic page, popup dialog, or sliding bottom sheet with various choices input such as radio, checkbox, switch, chips, or even custom input. Supports single and multiple choice. Inspired by Smart Select component from [Framework7](https://framework7.io/).\n\n## What's New in Version 4.x.x\n\n- Customizable every part on modal widget (header, footer, searchbar, confirm button, searchbar toggle) using style configuration or widget builder\n- Validate before confirm\n- Auto search on type\n- Accent marks handler on search\n- Highlight search result\n- Chips tile widget\n- Grid choice layout\n- Horizotal or vertical choice list scroll direction\n- Simplify class name and enum\n- Configurations supports `copyWith` and `merge`\n- Use `StatefulWidget` as state management\n- Easy shortcut to define configuration\n- Soft depends to other package\n\n## To Do\n\n- Right-To-Left parameter support, currently this can be achieved using widget builder\n- Internally handle async choice items loader\n- Custom search handler\n- Choice items pagination (pull to refresh and pull to load more)\n- Add more test\n\n## Migration from 4.0.0 to 4.2.0\n\n- `modalValidation` function nows should return `String` to indicates the changes value is not valid and `null` or empty `String` to indicates the changes value is valid\n\n- To display tile with chips use param `S2Tile.body` and `S2TileChips`, instead of `S2ChipsTile`\n\n## Migration from 3.0.x to 4.0.0\n\n- The parameter `options` is removed, instead use `choiceItems`\n\n- Simplify class name and enum\n\n  - `SmartSelectTile` to `S2Tile`\n  - `SmartSelectOption` to `S2Choice`\n  - `SmartSelectChoiceConfig` to `S2ChoiceConfig`\n  - `SmartSelectChoiceStyle` to `S2ChoiceStyle`\n  - `SmartSelectChoiceType` to `S2ChoiceType`\n  - `SmartSelectModalConfig` to `S2ModalConfig`\n  - `SmartSelectModalStyle` to `S2ModalStyle`\n  - `SmartSelectModalHeaderStyle` to `S2ModalHeaderStyle`\n  - `SmartSelectModalType` to `S2ModalType`\n\n- The parameter `builder` now is a collection of builder (`S2SingleBuilder` or `S2MultiBuilder`), instead use `tileBuilder` to create trigger tile widget.\n\n- The parameters `dense`, `enabled`, `isLoading`, `isTwoLine`, `leading`, `loadingText`, `padding`, `selected`, `trailing` is removed from `SmartSelect` class, instead use `builder.tile` or `tileBuilder` and return `S2Tile` widget, it's has all these parameters.\n\n- The parameter `onChange` nows return `S2SingleState state` or `S2MultiState state` instead of `T value` or `List\u003cT\u003e value`\n\n- The parameter `choiceConfig.useWrap` is removed, instead use `choiceConfig.layout = S2ChoiceLayout.wrap`\n\n- The parameter `choiceConfig.builder` moved to `builder.choice` or `choiceBuilder`\n\n- The parameter `choiceConfig.titleBuilder` moved to `builder.choiceTitle` or `choiceTitleBuilder`\n\n- The parameter `choiceConfig.subtitleBuilder` moved to `builder.choiceSubtitle` or `choiceSubtitleBuilder`\n\n- The parameter `choiceConfig.secondaryBuilder` moved to `builder.choiceSecondary` or `choiceSecondaryBuilder`\n\n- The parameter `choiceConfig.dividerBuilder` moved to `builder.choiceDivider` or `choiceDividerBuilder`\n\n- The parameter `choiceConfig.emptyBuilder` moved to `builder.choiceEmpty` or `choiceEmptybuilder`\n\n- The parameter `choiceConfig.glowingOverscrollIndicatorColor` is removed, instead use `choiceConfig.overscrollColor`\n\n- The parameter `choiceConfig.spacing` and `choiceConfig.runSpacing` moved to `choiceConfig.style.spacing` and `choiceConfig.style.runSpacing`\n\n- The parameter `choiceConfig.useCheckmark` moved to `choiceConfig.style.showCheckmark`\n\n- The parameter `choiceConfig.padding` moved to `choiceConfig.style.wrapperPadding`\n\n- The default of grouped choice is not using sticky header now, instead use `groupBuilder` like this:\n\n  ```dart\n  dependencies:\n    sticky_headers: \"^0.1.8\"\n  ```\n\n  ```dart\n  import 'package:sticky_headers/sticky_headers.dart';\n\n  SmartSelect\u003cT\u003e.single/multiple(\n    ...,\n    ...,\n    choiceGroupBuilder: (context, header, choices) {\n      return StickyHeader(\n        header: header,\n        content: choices,\n      );\n    },\n  );\n  ```\n\n# Preview\n\n\u003ctable\u003e\n\u003cthead\u003e\n  \u003ctr\u003e\n    \u003cth align=\"left\"\u003e\u003c/th\u003e\n    \u003cth align=\"center\"\u003eSingle Choice\u003c/th\u003e\n    \u003cth align=\"center\"\u003eMultiple Choice\u003c/th\u003e\n  \u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"left\"\u003eModal Type\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimage alt=\"Single Choice Modal\" src=\"https://raw.githubusercontent.com/davigmacode/flutter_smart_select/master/demo/screens/single-modal.gif\"/\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimage alt=\"Multiple Choice Modal\" src=\"https://raw.githubusercontent.com/davigmacode/flutter_smart_select/master/demo/screens/multiple-modal.gif\"/\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"left\"\u003eChips Widget\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimage alt=\"Single Choice Chips\" src=\"https://raw.githubusercontent.com/davigmacode/flutter_smart_select/master/demo/screens/single-chips.gif\"/\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimage alt=\"Multiple Choice Chips\" src=\"https://raw.githubusercontent.com/davigmacode/flutter_smart_select/master/demo/screens/multiple-chips.gif\"/\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"left\"\u003eSwitch Widget\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      None\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimage alt=\"Multiple Choice Switch\" src=\"https://raw.githubusercontent.com/davigmacode/flutter_smart_select/master/demo/screens/multiple-switches.gif\"/\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"left\"\u003eCustom Tile\u003c/td\u003e\n    \u003ctd align=\"center\" colspan=\"2\"\u003e\n      \u003cimage alt=\"Customize Tile\" src=\"https://raw.githubusercontent.com/davigmacode/flutter_smart_select/master/demo/screens/custom-tile.gif\"/\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"left\"\u003eModal Filter\u003c/td\u003e\n    \u003ctd align=\"center\" colspan=\"2\"\u003e\n      \u003cimage alt=\"Modal Filter\" src=\"https://raw.githubusercontent.com/davigmacode/flutter_smart_select/master/demo/screens/modal-filter.gif\"/\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"left\"\u003eModal Confirm\u003c/td\u003e\n    \u003ctd align=\"center\" colspan=\"2\"\u003e\n      \u003cimage alt=\"Modal Confirm\" src=\"https://raw.githubusercontent.com/davigmacode/flutter_smart_select/master/demo/screens/modal-confirm.gif\"/\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"left\"\u003eModal Validation\u003c/td\u003e\n    \u003ctd align=\"center\" colspan=\"2\"\u003e\n      \u003cimage alt=\"Modal Validation\" src=\"https://raw.githubusercontent.com/davigmacode/flutter_smart_select/master/demo/screens/modal-validation.gif\"/\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"left\"\u003eModal Selector\u003c/td\u003e\n    \u003ctd align=\"center\" colspan=\"2\"\u003e\n      \u003cimage alt=\"Modal Selector\" src=\"https://raw.githubusercontent.com/davigmacode/flutter_smart_select/master/demo/screens/modal-selector.gif\"/\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"left\"\u003eModal Shape\u003c/td\u003e\n    \u003ctd align=\"center\" colspan=\"2\"\u003e\n      \u003cimage alt=\"Modal Shape\" src=\"https://raw.githubusercontent.com/davigmacode/flutter_smart_select/master/demo/screens/modal-shape.gif\"/\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"left\"\u003eChoice Items\u003c/td\u003e\n    \u003ctd align=\"center\" colspan=\"2\"\u003e\n      \u003cimage alt=\"Choice Items\" src=\"https://raw.githubusercontent.com/davigmacode/flutter_smart_select/master/demo/screens/choice-item.gif\"/\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"left\"\u003eChoice Grouped\u003c/td\u003e\n    \u003ctd align=\"center\" colspan=\"2\"\u003e\n      \u003cimage alt=\"Choice Grouped\" src=\"https://raw.githubusercontent.com/davigmacode/flutter_smart_select/master/demo/screens/choice-grouped.gif\"/\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"left\"\u003eChoice Builder\u003c/td\u003e\n    \u003ctd align=\"center\" colspan=\"2\"\u003e\n      \u003cimage alt=\"Choice Builder\" src=\"https://raw.githubusercontent.com/davigmacode/flutter_smart_select/master/demo/screens/choice-builder.gif\"/\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"left\"\u003eDownload APK\u003c/td\u003e\n    \u003ctd align=\"center\" colspan=\"2\"\u003e\n      \u003ca href=\"https://raw.githubusercontent.com/davigmacode/flutter_smart_select/master/demo/build/SmartSelect.apk\"\u003e\u003cimage alt=\"Demo App\" src=\"https://raw.githubusercontent.com/davigmacode/flutter_smart_select/master/demo/build/qr-apk.png\"/\u003e\u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\n\n# Features\n\n* Select single or multiple choice\n* Open choices modal in full page, bottom sheet, or popup dialog\n* Various choices input (radio, checkbox, switch, chips, or custom widget)\n* Various choices layout (list, wrap, or grid)\n* Grouping choices with easy support to sticky header\n* Searchable choices with highlighted result\n* Disabled or hidden choices\n* Customizable trigger/tile widget\n* Customizable modal style\n* Customizable modal header style\n* Customizable modal footer\n* Customizable choices style\n* Build choice items from any `List`\n* Easy load async choice items\n* and many more\n\n# Usage\n\nFor a complete usage, please see the [example](https://pub.dev/packages/smart_select#-example-tab-).\n\nTo read more about classes and other references used by `smart_select`, see the [API Reference](https://pub.dev/documentation/smart_select/latest/).\n\n## Single Choice\n\n```dart\n// available configuration for single choice\nSmartSelect\u003cT\u003e.single({\n\n  // The primary content of the widget.\n  // Used in trigger widget and header option\n  String title,\n\n  // The text displayed when the value is null\n  String placeholder = 'Select one',\n\n  // The current value of the single choice widget.\n  @required T value,\n\n  // Called when single choice value changed\n  @required ValueChanged\u003cS2SingleState\u003cT\u003e\u003e onChange,\n\n  // choice item list\n  List\u003cS2Choice\u003cT\u003e\u003e choiceItems,\n\n  // other available configuration\n  // explained below\n  ...,\n  ...,\n\n})\n```\n\n```dart\n// simple usage\n\nString value = 'flutter';\nList\u003cS2Choice\u003cString\u003e\u003e options = [\n  S2Choice\u003cString\u003e(value: 'ion', title: 'Ionic'),\n  S2Choice\u003cString\u003e(value: 'flu', title: 'Flutter'),\n  S2Choice\u003cString\u003e(value: 'rea', title: 'React Native'),\n];\n\n@override\nWidget build(BuildContext context) {\n  return SmartSelect\u003cString\u003e.single(\n    title: 'Frameworks',\n    value: value,\n    choiceItems: options,\n    onChange: (state) =\u003e setState(() =\u003e value = state.value)\n  );\n}\n```\n\n## Multiple Choice\n\n```dart\n// available configuration for multiple choice\nSmartSelect\u003cT\u003e.multiple({\n\n  // The primary content of the widget.\n  // Used in trigger widget and header option\n  String title,\n\n  // The text displayed when the value is null\n  String placeholder = 'Select one',\n\n  // The current value of the single choice widget.\n  @required List\u003cT\u003e value,\n\n  // Called when single choice value changed\n  @required ValueChanged\u003cS2MultiState\u003cT\u003e\u003e onChange,\n\n  // choice item list\n  List\u003cS2Choice\u003cT\u003e\u003e choiceItems,\n\n  // other available configuration\n  // explained below\n  ...,\n  ...,\n\n})\n```\n\n```dart\n// a simple usage\n\nList\u003cint\u003e value = [2];\nList\u003cS2Choice\u003cint\u003e\u003e frameworks = [\n  S2Choice\u003cint\u003e(value: 1, title: 'Ionic'),\n  S2Choice\u003cint\u003e(value: 2, title: 'Flutter'),\n  S2Choice\u003cint\u003e(value: 3, title: 'React Native'),\n];\n\n@override\nWidget build(BuildContext context) {\n  return SmartSelect\u003cint\u003e.multiple(\n    title: 'Frameworks',\n    value: value,\n    choiceItems: options,\n    onChange: (state) =\u003e setState(() =\u003e value = state.value),\n  );\n}\n```\n\n## Choices\n\n```dart\n// configuration\nSmartSelect\u003cT\u003e.[single|multiple]({\n\n  // other configuration\n  ...,\n  ...,\n\n  // choice item list\n  List\u003cS2Choice\u003cT\u003e\u003e choiceItems,\n\n  // other configuration\n  ...,\n  ...,\n\n});\n```\n\n`choiceItems` can be input directly as in the example below, more info about `S2Choice` can be found on the [API Reference](https://pub.dev/documentation/smart_select/latest/smart_select/S2Choice-class.html)\n\n```dart\nSmartSelect\u003cT\u003e.[single|multiple](\n  ...,\n  ...,\n  choiceItems: \u003cS2Choice\u003cT\u003e\u003e[\n    S2Choice\u003cT\u003e(value: 1, title: 'Ionic'),\n    S2Choice\u003cT\u003e(value: 2, title: 'Flutter'),\n    S2Choice\u003cT\u003e(value: 3, title: 'React Native'),\n  ],\n);\n```\n\n`choiceItems` also can be created from any list using helper provided by this package, like the example below\n\n```dart\nList\u003cMap\u003cString, String\u003e\u003e days = [\n  { 'value': 'mon', 'title': 'Monday' },\n  { 'value': 'tue', 'title': 'Tuesday' },\n  { 'value': 'wed', 'title': 'Wednesday' },\n  { 'value': 'thu', 'title': 'Thursday' },\n  { 'value': 'fri', 'title': 'Friday' },\n  { 'value': 'sat', 'title': 'Saturday' },\n  { 'value': 'sun', 'title': 'Sunday' },\n];\n\nSmartSelect\u003cString\u003e.[single|multiple](\n  ...,\n  ...,\n  choiceItems: S2Choice.listFrom\u003cString, Map\u003cString, String\u003e\u003e(\n    source: days,\n    value: (index, item) =\u003e item['value'],\n    title: (index, item) =\u003e item['title'],\n  ),\n);\n```\n\n### Load Choice Item Asynchronously\n\nPlease follow these [example](https://github.com/davigmacode/flutter_smart_select/blob/master/example/lib/features_option/option_async.dart)\n\n## Modal Configuration\n\nMore info about `S2ModalConfig` can be found on the [API Reference](https://pub.dev/documentation/smart_select/latest/smart_select/S2ModalConfig-class.html)\n\n```dart\n// available configuration\nSmartSelect\u003cT\u003e.[single|multiple]({\n\n  // other configuration\n  ...,\n  ...,\n\n  // Modal validation of single choice widget\n  ValidationCallback\u003cT\u003e modalValidation,\n\n  // Modal configuration\n  S2ModalConfig modalConfig,\n\n  // Configure modal style\n  // shortcut to [modalConfig.style]\n  S2ModalStyle modalStyle,\n\n  // Configure modal header style\n  // shortcut to [modalConfig.headerStyle]\n  S2ModalHeaderStyle modalHeaderStyle,\n\n  // Modal type to display choices\n  // shortcut to [modalConfig.type]\n  S2ModalType modalType,\n\n  // Use different title with the trigger widget title\n  // shortcut to [modalConfig.title]\n  String modalTitle,\n\n  // Whether the option list need to confirm\n  // to return the changed value\n  // shortcut to [modalConfig.useConfirm]\n  bool modalConfirm,\n\n  // Whether the options list modal use header or not\n  // shortcut to [modalConfig.useHeader]\n  bool modalHeader,\n\n  // Whether the option list is filterable or not\n  // shortcut to [modalConfig.useFilter]\n  bool modalFilter,\n\n  // Whether the filter is autocomplete or need confirmation\n  // shortcut to [modalConfig.filterAuto]\n  bool modalFilterAuto,\n\n  // Custom searchbar hint\n  // shortcut to [modalConfig.filterHint]\n  String modalFilterHint,\n\n  // other configuration\n  ...,\n  ...,\n\n});\n```\n\n### Modal Type\n\nBy default SmartSelect will open choices modal in full page. You can change it by changing with this value:\n\n```dart\n// Available option\nenum S2ModalType {\n\n  // open in full page\n  fullPage,\n\n  // open in popup dialog\n  popupDialog,\n\n  // open in sliding bottom sheet\n  bottomSheet,\n\n}\n```\n\n### Modal Style\n\n```dart\n// Available option to configure modal style\nS2ModalStyle({\n\n  // Modal border shape\n  // used in popup dialog and bottom sheet\n  ShapeBorder shape,\n\n  // Modal elevation\n  // used in popup dialog and bottom sheet\n  double elevation,\n\n  // Modal background color\n  Color backgroundColor,\n\n  // Modal clip behavior\n  Clip clipBehavior,\n\n})\n```\n\n### Modal Header Style\n\n```dart\n// Available option to configure modal header style\nS2ModalHeaderStyle({\n\n  // Header border shape\n  ShapeBorder shape,\n\n  // Header elevation\n  double elevation,\n\n  // Header background color\n  Color backgroundColor,\n\n  // Header brightness\n  Brightness brightness,\n\n  // Whether the header title is centered\n  bool centerTitle,\n\n  // Whether the header use automaticallyImplyLeading or not\n  bool useLeading,\n\n  // Header text style\n  // used by title and search field\n  TextStyle textStyle,\n\n  // Header icon theme\n  IconThemeData iconTheme,\n\n  // Header actions icon theme\n  IconThemeData actionsIconTheme,\n\n})\n```\n\n## Choices Configuration\n\nMore info about `S2ChoiceConfig` can be found on the [API Reference](https://pub.dev/documentation/smart_select/latest/smart_select/S2ChoiceConfig-class.html)\n\n```dart\n// Available option to configure choices\nSmartSelect\u003cT\u003e.[single|multiple]({\n\n  // other configuration\n  ...,\n  ...,\n\n  // choice configuration\n  S2ChoiceConfig choiceConfig,\n\n  // configure choice style\n  // shortcut to [choiceConfig.style]\n  S2ChoiceStyle choiceStyle,\n\n  // configure choices group header style\n  // shortcut to [choiceConfig.headerStyle]\n  S2ChoiceHeaderStyle choiceHeaderStyle,\n\n  // choice widget type\n  // shortcut to [choiceConfig.type]\n  S2ChoiceType choiceType,\n\n  // choice layout to display items\n  // shortcut to [choiceConfig.layout]\n  S2ChoiceLayout choiceLayout,\n\n  // choice list scroll direction\n  // currently only support when\n  // [layout] is [S2ChoiceLayout.wrap]\n  // shortcut to [choiceConfig.direction]\n  Axis choiceDirection,\n\n  // Whether the choices list is grouped\n  // shortcut to [choiceConfig.isGrouped]\n  bool choiceGrouped,\n\n  // Whether the choices item use divider or not\n  // shortcut to [choiceConfig.useDivider]\n  bool choiceDivider,\n\n  // For grid choice layout\n  // shortcut to [choiceConfig.gridDelegate]\n  SliverGridDelegate choiceGrid,\n\n  // other configuration\n  ...,\n  ...,\n\n});\n```\n\n### Choice Type\n\nBy default SmartSelect will use `radios` for single choice and `checkboxes` for multiple choice, but it can change by changing  with this value:\n\n```dart\n// Type of choice input\nenum S2ChoiceType {\n\n  // use radio widget\n  // for single choice\n  radios,\n\n  // use checkbox widget\n  // for multiple choice\n  checkboxes,\n\n  // use switch widget\n  // for multiple choice\n  switches,\n\n  // use chip widget\n  // for single and multiple choice\n  chips,\n\n}\n```\n\n### Choice Layout\n\nBy default SmartSelect will use `list`, but it can change by changing  with this value:\n\n```dart\n// Layout of choice item\nenum S2ChoiceLayout {\n\n  // use list view widget\n  list,\n\n  // use wrap view widget\n  wrap,\n\n  // use grid view widget\n  grid,\n\n}\n```\n\n### Choice Styles\n\n```dart\n// Available option to configure choice style\nS2ChoiceStyle({\n\n  // How much space to place between children in a run in the main axis.\n  // When use [SmartSelectChoiceType.chips] or [useWrap] is [true]\n  double spacing,\n\n  // How much space to place between the runs themselves in the cross axis.\n  // When use [SmartSelectChoiceType.chips] or [useWrap] is [true]\n  double runSpacing,\n\n  // choices wrapper padding\n  EdgeInsetsGeometry wrapperPadding,\n\n  // Choices item padding\n  EdgeInsetsGeometry padding,\n\n  // choices item title style\n  TextStyle titleStyle,\n\n  // choices item subtitle style\n  TextStyle subtitleStyle,\n\n  // whether the chips use checkmark or not\n  bool showCheckmark,\n\n  // Where to place the control in widgets that use\n  // [ListTile] to position a control next to a label.\n  S2ChoiceControl control,\n\n  // Highlight color\n  Color highlightColor,\n\n  // Primary color of selected choice item\n  Color activeColor,\n\n  // Primary color of unselected choice item\n  Color color,\n\n  // Secondary color of selected choice item\n  Color activeAccentColor,\n\n  // Secondary color of unselected choice item\n  Color accentColor,\n\n  // Brightness for selected Chip\n  Brightness activeBrightness,\n\n  // Brightness for unselected Chip\n  Brightness brightness,\n\n  // Opacity for selected Chip border, only effect when\n  // [activeBrightness] is [Brightness.light]\n  double activeBorderOpacity,\n\n  // Opacity for unselected chip border, only effect when\n  // [brightness] is [Brightness.light]\n  double borderOpacity,\n\n  // Shape clip behavior\n  Clip clipBehavior,\n\n})\n```\n\n### Choice Header Style\n\n```dart\n// Available option to configure choices group header widget style\nS2ChoiceHeaderStyle({\n\n  // Group header background color\n  Color backgroundColor,\n\n  // Highlight color\n  Color highlightColor,\n\n  // Group header text style\n  TextStyle textStyle,\n\n  // Group header padding\n  EdgeInsetsGeometry padding,\n\n  // Group header height\n  double height,\n\n})\n```\n\n## Builder Widget\n\n### Builder for Single Choice\n\n```dart\n// available builder configuration\n// for single choice\nSmartSelect\u003cT\u003e.single({\n\n  // other configuration\n  ...,\n  ...,\n\n  // Builder collection of single choice widget\n  S2SingleBuilder\u003cT\u003e builder,\n\n  // Builder for custom tile widget\n  // shortcut to [builder.tile]\n  S2WidgetBuilder\u003cS2SingleState\u003cT\u003e\u003e tileBuilder,\n\n  // Builder for custom modal widget\n  // shortcut to [builder.modal]\n  S2WidgetBuilder\u003cS2SingleState\u003cT\u003e\u003e modalBuilder,\n\n  // Builder for custom modal header widget\n  // shortcut to [builder.modalHeader]\n  S2WidgetBuilder\u003cS2SingleState\u003cT\u003e\u003e modalHeaderBuilder,\n\n  // Builder for custom modal actions widget\n  // shortcut to [builder.modalActions]\n  S2ListWidgetBuilder\u003cS2SingleState\u003cT\u003e\u003e modalActionsBuilder,\n\n  // Builder for custom modal confirm action widget\n  // shortcut to [builder.modalConfirm]\n  S2WidgetBuilder\u003cS2SingleState\u003cT\u003e\u003e modalConfirmBuilder,\n\n  // Builder for divider widget between header, body, and footer modal\n  // shortcut to [builder.modalDivider]\n  S2WidgetBuilder\u003cS2SingleState\u003cT\u003e\u003e modalDividerBuilder,\n\n  // Builder for custom footer widget\n  // shortcut to [builder.modalFooter]\n  S2WidgetBuilder\u003cS2SingleState\u003cT\u003e\u003e modalFooterBuilder,\n\n  // other configuration\n  ...,\n  ...,\n\n});\n```\n\n### Builder for Multiple Choice\n\n```dart\n// available builder configuration\n// for multiple choice\nSmartSelect\u003cT\u003e.multiple({\n\n  // other configuration\n  ...,\n  ...,\n\n  // Builder collection of single choice widget\n  S2MultiBuilder\u003cT\u003e builder,\n\n  // Builder for custom tile widget\n  // shortcut to [builder.tile]\n  S2WidgetBuilder\u003cS2MultiState\u003cT\u003e\u003e tileBuilder,\n\n  // Builder for custom modal widget\n  // shortcut to [builder.modal]\n  S2WidgetBuilder\u003cS2MultiState\u003cT\u003e\u003e modalBuilder,\n\n  // Builder for custom modal header widget\n  // shortcut to [builder.modalHeader]\n  S2WidgetBuilder\u003cS2MultiState\u003cT\u003e\u003e modalHeaderBuilder,\n\n  // Builder for custom modal actions widget\n  // shortcut to [builder.modalActions]\n  S2ListWidgetBuilder\u003cS2MultiState\u003cT\u003e\u003e modalActionsBuilder,\n\n  // Builder for custom modal confirm action widget\n  // shortcut to [builder.modalConfirm]\n  S2WidgetBuilder\u003cS2MultiState\u003cT\u003e\u003e modalConfirmBuilder,\n\n  // Builder for divider widget between header, body, and footer modal\n  // shortcut to [builder.modalDivider]\n  S2WidgetBuilder\u003cS2MultiState\u003cT\u003e\u003e modalDividerBuilder,\n\n  // Builder for custom footer widget\n  // shortcut to [builder.modalFooter]\n  S2WidgetBuilder\u003cS2MultiState\u003cT\u003e\u003e modalFooterBuilder,\n\n  // other configuration\n  ...,\n  ...,\n\n});\n```\n\n### Other Builder\n\n```dart\n// another builder configuration\nSmartSelect\u003cT\u003e.[single|multiple]({\n\n  // other configuration\n  ...,\n  ...,\n\n  // Builder for modal filter widget\n  // shortcut to [builder.modalFilter]\n  S2WidgetBuilder\u003cS2Filter\u003e modalFilterBuilder,\n\n  // Builder for modal filter toggle widget\n  // shortcut to [builder.modalFilterToggle]\n  S2WidgetBuilder\u003cS2Filter\u003e modalFilterToggleBuilder,\n\n  // Builder for each custom choices item widget\n  // shortcut to [builder.choice]\n  S2ChoiceBuilder\u003cT\u003e choiceBuilder,\n\n  // Builder for each custom choices item title widget\n  // shortcut to [builder.choiceTitle]\n  S2ChoiceBuilder\u003cT\u003e choiceTitleBuilder,\n\n  // Builder for each custom choices item subtitle widget\n  // shortcut to [builder.choiceSubtitle]\n  S2ChoiceBuilder\u003cT\u003e choiceSubtitleBuilder,\n\n  // Builder for each custom choices item secondary widget\n  // shortcut to [builder.choiceSecondary]\n  S2ChoiceBuilder\u003cT\u003e choiceSecondaryBuilder,\n\n  /// Builder for custom divider widget between choices item\n  // shortcut to [builder.choiceDivider]\n  IndexedWidgetBuilder choiceDividerBuilder,\n\n  // Builder for custom empty display\n  // shortcut to [builder.choiceEmpty]\n  S2WidgetBuilder\u003cString\u003e choiceEmptyBuilder,\n\n  // A widget builder for custom choices group\n  // shortcut to [builder.choiceGroup]\n  S2ChoiceGroupBuilder choiceGroupBuilder,\n\n  // A widget builder for custom header choices group\n  // shortcut to [builder.choiceHeader]\n  S2ChoiceHeaderBuilder choiceHeaderBuilder,\n\n  // other configuration\n  ...,\n  ...,\n\n});\n```\n\n## Tile Widget\n\n### Default Tile\n\n```dart\n// Default tile/trigger widget\nS2Tile\u003cT\u003e({\n\n  // The value of the selected option.\n  String value,\n\n  // The primary content of the list tile.\n  Widget title,\n\n  // A widget to display before the title.\n  // Typically an [Icon] or a [CircleAvatar] widget.\n  Widget leading,\n\n  // A widget to display after the title.\n  // Typically an [Icon] widget.\n  Widget trailing,\n\n  // Whether this list tile is intended to display loading stats.\n  bool isLoading,\n\n  // String text used as loading text\n  String loadingText,\n\n  // Whether this list tile is intended to display two lines of text.\n  bool isTwoLine,\n\n  // Whether this list tile is interactive.\n  bool enabled,\n\n  // If this tile is also [enabled] then icons and text are rendered with the same color.\n  bool selected,\n\n  // Whether this list tile is part of a vertically dense list.\n  bool dense,\n\n  // Whether the [value] is displayed or not\n  bool hideValue,\n\n  // The tile's internal padding.\n  EdgeInsetsGeometry padding,\n\n  // Called when the user taps this list tile.\n  GestureTapCallback onTap,\n\n  // widget to display below the tile\n  // usually used to display chips with S2TileChips\n  Widget body,\n\n})\n```\n\n```dart\n// usage example\nSmartSelect\u003cT\u003e.single(\n  ...,\n  ...,\n  tileBuilder: (context, state) {\n    return S2Tile(\n      title: state.titleWidget,\n      value: state.valueDisplay,\n      onTap: state.showModal,\n      isLoading: true,\n    );\n  },\n);\n\n// usage example from state\nSmartSelect\u003cT\u003e.multiple(\n  ...,\n  ...,\n  tileBuilder: (context, state) {\n    return S2Tile.fromState(\n      state,\n      isLoading: true,\n    );\n  },\n);\n```\n\n### Tile With Chips\n\n```dart\n// Chips tile/trigger widget\nS2TileChips({\n\n  // List of value of the selected choices.\n  int chipLength,\n\n  // Widget builder for chip label item\n  IndexedWidgetBuilder chipLabelBuilder,\n\n  // Widget builder for chip avatar item\n  IndexedWidgetBuilder chipAvatarBuilder,\n\n  // Widget builder for chip item\n  IndexedWidgetBuilder chipBuilder,\n\n  // Called when the user delete the chip item.\n  ValueChanged\u003cint\u003e chipOnDelete,\n\n  // Chip color\n  Color chipColor,\n\n  // Chip border opacity\n  double chipBorderOpacity,\n\n  // Chip brightness\n  Brightness chipBrightness,\n\n  // Chip delete button color\n  Color chipDeleteColor,\n\n  // Chip delete button icon\n  Icon chipDeleteIcon,\n\n  // Chip spacing\n  double chipSpacing,\n\n  // Chip run spacing\n  double chipRunSpacing,\n\n  // Chip shape border\n  ShapeBorder chipShape,\n\n  // The [Widget] displayed when the [values] is null\n  Widget placeholder,\n\n  // Whether the chip list is scrollable or not\n  bool scrollable,\n\n  // Chip list padding\n  EdgeInsetsGeometry padding,\n\n})\n```\n\n```dart\n/// usage example\nSmartSelect\u003cString\u003e.multiple(\n  ...,\n  ...,\n  value: users,\n  tileBuilder: (context, state) {\n    return S2Tile.fromState(\n      state,\n      hideValue: true,\n      body: S2TileChips(\n        chipLength: state.valueObject.length,\n        chipLabelBuilder: (context, i) {\n          return Text(state.valueObject[i].title);\n        },\n        chipAvatarBuilder: (context, i) {\n          return CircleAvatar(\n            backgroundImage: NetworkImage(state.valueObject[i].meta['picture']['thumbnail'])\n          );\n        },\n        chipOnDelete: (i) {\n          setState(() =\u003e users.remove(state.valueObject[i].value));\n        },\n        chipColor: Colors.blue,\n        chipBrightness: Brightness.dark,\n        chipBorderOpacity: .5,\n      ),\n    );\n  },\n);\n```\n\n# License\n\n```\nCopyright (c) 2020 Irfan Vigma Taufik\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n```","funding_links":["https://www.buymeacoffee.com/davigmacode"],"categories":["Dart"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavigmacode%2Fflutter_smart_select","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdavigmacode%2Fflutter_smart_select","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavigmacode%2Fflutter_smart_select/lists"}