{"id":16059494,"url":"https://github.com/salim-lachdhaf/dropdown_search","last_synced_at":"2025-05-14T16:05:46.559Z","repository":{"id":37670355,"uuid":"249739191","full_name":"salim-lachdhaf/dropdown_search","owner":"salim-lachdhaf","description":"Simple and robust Dropdown with item search feature, making it possible to use an offline item list or filtering URL for easy customization.","archived":false,"fork":false,"pushed_at":"2025-02-16T15:41:22.000Z","size":9067,"stargazers_count":366,"open_issues_count":19,"forks_count":355,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-06T22:01:29.167Z","etag":null,"topics":["android","dart","dropdown","flutter","ios","material-design"],"latest_commit_sha":null,"homepage":"","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/salim-lachdhaf.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"buy_me_a_coffee":"salimdev","github":"salim-lachdhaf"}},"created_at":"2020-03-24T15:04:09.000Z","updated_at":"2025-03-19T23:18:17.000Z","dependencies_parsed_at":"2024-01-19T06:55:34.016Z","dependency_job_id":"d6f55fde-46ea-4a9e-bc9a-ddcabd4b0b50","html_url":"https://github.com/salim-lachdhaf/dropdown_search","commit_stats":{"total_commits":191,"total_committers":19,"mean_commits":"10.052631578947368","dds":0.6439790575916231,"last_synced_commit":"86d7b59cb3c5146f159c08eb097091cda4193ccd"},"previous_names":["salim-lachdhaf/searchable_dropdown"],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/salim-lachdhaf%2Fdropdown_search","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/salim-lachdhaf%2Fdropdown_search/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/salim-lachdhaf%2Fdropdown_search/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/salim-lachdhaf%2Fdropdown_search/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/salim-lachdhaf","download_url":"https://codeload.github.com/salim-lachdhaf/dropdown_search/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248804773,"owners_count":21164131,"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":["android","dart","dropdown","flutter","ios","material-design"],"created_at":"2024-10-09T04:01:11.124Z","updated_at":"2025-04-14T00:51:38.040Z","avatar_url":"https://github.com/salim-lachdhaf.png","language":"Dart","funding_links":["https://buymeacoffee.com/salimdev","https://github.com/sponsors/salim-lachdhaf","https://www.buymeacoffee.com/SalimDev"],"categories":["Dart"],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\n  Flutter DropdownSearch\n  \u003cbr\u003e\n\u003c/h1\u003e\n\n\u003ch4 align=\"center\"\u003e\n  Simple and highly customizable Flutter Dropdown with a lot of features (search, adaptive, async/sync values, ...) with multi mode like menu, modal, dialog, bottomSheet and etc.\n\u003c/h4\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://pub.dev/packages/dropdown_search\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/build-passing-brightgreen\"\n         alt=\"Build\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://pub.dev/packages/dropdown_search\"\u003e\u003cimg src=\"https://img.shields.io/pub/v/dropdown_search\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.buymeacoffee.com/SalimDev\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/$-donate-ff69b4.svg?maxAge=2592000\u0026amp;style=flat\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"#key-features\"\u003eKey Features\u003c/a\u003e •\n  \u003ca href=\"https://github.com/salim-lachdhaf/searchable_dropdown/blob/master/example\"\u003eExamples\u003c/a\u003e •\n  \u003ca href=\"#license\"\u003eLicense\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/salim-lachdhaf/searchable_dropdown/blob/master/screenshots/example.gif?raw=true\" alt=\"Dropdown search\" /\u003e\n\u003c/p\u003e\n\n## Key Features\n\n* Reactive widget\n* Infinite list (lazy loading)\n* Sync and/or Async items (online, offline, DB, ...)\n* Searchable dropdown\n* Support multi level items\n* Five dropdown modes: Menu / BottomSheet / ModalBottomSheet / Dialog / autocomplete\n* Single \u0026 multi selection\n* Adaptive platform UI : Material, Adaptive, Cupertino\n* Easy customizable UI - No Boilerplate\n\n\u003cbr\u003e\n\u003ctable\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\n            \u003cimg src=\"https://github.com/salim-lachdhaf/searchable_dropdown/blob/master/screenshots/exa1.png?raw=true\" alt=\"Dropdown search\" width=\"300\" /\u003e\n            \u003cbr\u003e\u003cbr\u003e\n            \u003cimg src=\"https://github.com/salim-lachdhaf/searchable_dropdown/blob/master/screenshots/exa4.gif?raw=true\" alt=\"Dropdown search\" width=\"300\" /\u003e\n        \u003c/td\u003e\n        \u003ctd\u003e\u003cimg src=\"https://github.com/salim-lachdhaf/searchable_dropdown/blob/master/screenshots/exa6.gif?raw=true\" alt=\"Dropdown search\" width=\"300\" /\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003cimg src=\"https://github.com/salim-lachdhaf/searchable_dropdown/blob/master/screenshots/exa7.gif?raw=true\" alt=\"Dropdown search\" width=\"300\" /\u003e\u003c/td\u003e\n        \u003ctd\u003e\n            \u003cimg src=\"https://github.com/salim-lachdhaf/searchable_dropdown/blob/master/screenshots/exa3.png?raw=true\" alt=\"Dropdown search\" width=\"300\" /\u003e\n            \u003cbr\u003e\u003cbr\u003e\n            \u003cimg src=\"https://github.com/salim-lachdhaf/searchable_dropdown/blob/master/screenshots/exa5.png?raw=true\" alt=\"Dropdown search\" width=\"300\" /\u003e\n        \u003c/td\u003e\n    \u003c/tr\u003e\n\u003c/table\u003e\n\n\n## pubspec.yaml\n```yaml\ndropdown_search: \u003clastest version\u003e\n```\n\n## Import\n```dart\nimport 'package:dropdown_search/dropdown_search.dart';\n```\n\n## Adaptive Platform UI\n* To use Material ui (_**by default**_) use `DropdownSearch\u003cT\u003e(...)` or  `DropdownSearch\u003cT\u003e.multiSelection(...)`\n* for the cupertino mode use `CupertinoDropdownSearch\u003cT\u003e(...)` or  `CupertinoDropdownSearch\u003cT\u003e.multiSelection(...)`\n* To let the package pick the suitable platform UI based on the used platform, use `AdaptiveDropdownSearch\u003cT\u003e(...)` or  `AdaptiveDropdownSearch\u003cT\u003e.multiSelection(...)`\n\n\n* **_Bonus Tip_**: with adaptive platform ui you can use different `PopupMode` depending on platform type:\n```dart\nAdaptiveDropdownSearch\u003cT\u003e(\n    popupProps: AdaptivePopupProps(\n        cupertinoProps: CupertinoPopupProps.bottomSheet(),\n        materialProps: PopupProps.dialog()\n    ),\n)\n```\n\n## Infinite Scroll\nTo enable infinite scroll all you have to do is to declare `infiniteScrollProps` and of course don't forget to pass `loadProps` to your API like this:\n```dart\nDropdownSearch\u003cT\u003e(\n    items: (filter, loadProps) =\u003e _getDataFromAPI(filter, loadProps!.skip, loadProps!.take),\n    popupProps: PopupProps.dialog(\n        infiniteScrollProps: InfiniteScrollProps(\n            loadProps: LoadProps(skip: 0, take: 10),\n        ),\n    ),\n)\n```\n\n\n## Simple implementation\n\u003cdetails\u003e\u003csummary\u003eSee here\u003c/summary\u003e\n\n```dart\nDropdownSearch\u003cString\u003e(\n  items: (f, cs) =\u003e [\"Item 1\", 'Item 2', 'Item 3', 'Item 4'],\n  popupProps: PopupProps.menu(\n    disabledItemFn: (item) =\u003e item == 'Item 3',\n    fit: FlexFit.loose\n  ),\n),\n```\n\u003cimg src=\"https://github.com/salim-lachdhaf/searchable_dropdown/blob/master/screenshots/exa1.png?raw=true\" alt=\"Dropdown search\" width=\"400\" /\u003e\n\n\n\n```dart\nDropdownSearch\u003cString\u003e.multiSelection(\n  mode: Mode.CUSTOM,\n  items: (f, cs) =\u003e [\"Monday\", 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],\n  dropdownBuilder: (ctx, selectedItem) =\u003e Icon(Icons.calendar_month_outlined, size: 54),\n),\n```\n\u003cimg src=\"https://github.com/salim-lachdhaf/searchable_dropdown/blob/master/screenshots/exa2.png?raw=true\" alt=\"Dropdown search\" width=\"400\" /\u003e\n\n\n```dart\nDropdownSearch\u003c(String, Color)\u003e(\n  clickProps: ClickProps(borderRadius: BorderRadius.circular(20)),\n  mode: Mode.CUSTOM,\n  items: (f, cs) =\u003e [\n    (\"Red\", Colors.red),\n    (\"Black\", Colors.black),\n    (\"Yellow\", Colors.yellow),\n    ('Blue', Colors.blue),\n  ],\n  compareFn: (item1, item2) =\u003e item1.$1 == item2.$1,\n  popupProps: PopupProps.menu(\n  menuProps: MenuProps(align: MenuAlign.bottomCenter),\n    fit: FlexFit.loose,\n    itemBuilder: (context, item, isDisabled, isSelected) =\u003e Padding(\n      padding: const EdgeInsets.all(8.0),\n      child: Text(item.$1, style: TextStyle(color: item.$2, fontSize: 16)),\n    ),\n  ),\n  dropdownBuilder: (ctx, selectedItem) =\u003e Icon(Icons.face, color: selectedItem?.$2, size: 54),\n),\n```\n\u003cimg src=\"https://github.com/salim-lachdhaf/searchable_dropdown/blob/master/screenshots/exa4.gif?raw=true\" alt=\"Dropdown search\" width=\"400\" /\u003e\n\n```dart\nDropdownSearch\u003c(IconData, String)\u003e(\n  selectedItem: (Icons.person, 'Your Profile'),\n  compareFn: (item1, item2) =\u003e item1.$1 == item2.$2,\n  items: (f, cs) =\u003e [\n    (Icons.person, 'Your Profile'),\n    (Icons.settings, 'Setting'),\n    (Icons.lock_open_rounded, 'Change Password'),\n    (Icons.power_settings_new_rounded, 'Logout'),\n  ],\n  decoratorProps: DropDownDecoratorProps(\n    decoration: InputDecoration(\n      contentPadding: EdgeInsets.symmetric(vertical: 6),\n      filled: true,\n      fillColor: Color(0xFF1eb98f),\n      border: OutlineInputBorder(\n        borderSide: BorderSide(color: Colors.transparent),\n        borderRadius: BorderRadius.circular(8),\n      ),\n      focusedBorder: OutlineInputBorder(\n        borderSide: BorderSide(color: Colors.transparent),\n        borderRadius: BorderRadius.circular(8),\n      ),\n      enabledBorder: OutlineInputBorder(\n        borderSide: BorderSide(color: Colors.transparent),\n        borderRadius: BorderRadius.circular(8),\n      ),\n    ),\n  ),\n  dropdownBuilder: (context, selectedItem) {\n    return ListTile(\n      leading: Icon(selectedItem!.$1, color: Colors.white),\n      title: Text(\n        selectedItem.$2,\n        style: TextStyle(color: Colors.white, fontSize: 18, fontWeight: FontWeight.bold),\n      ),\n    );\n  },\n  popupProps: PopupProps.menu(\n    itemBuilder: (context, item, isDisabled, isSelected) {\n      return ListTile(\n        contentPadding: EdgeInsets.symmetric(vertical: 8, horizontal: 12),\n        leading: Icon(item.$1, color: Colors.white),\n        title: Text(\n          item.$2,\n          style: TextStyle(color: Colors.white, fontSize: 18, fontWeight: FontWeight.bold),\n        ),\n      );\n    },\n    fit: FlexFit.loose,\n    menuProps: MenuProps(\n      backgroundColor: Colors.transparent,\n      elevation: 0,\n      margin: EdgeInsets.only(top: 16),\n    ),\n    containerBuilder: (ctx, popupWidget) {\n      return Column(\n        mainAxisSize: MainAxisSize.min,\n        crossAxisAlignment: CrossAxisAlignment.end,\n        children: [\n          Padding(\n            padding: const EdgeInsets.only(right: 12),\n            child: Image.asset(\n              'assets/images/arrow-up.png',\n              color: Color(0xFF1eb98f),\n              height: 14,\n            ),\n          ),\n          Flexible(\n            child: Container(\n              decoration: BoxDecoration(\n                color: Color(0xFF1eb98f),\n                shape: BoxShape.rectangle,\n                borderRadius: BorderRadius.circular(8),\n              ),\n              child: popupWidget,\n            ),\n          ),\n        ],\n      );\n    },\n  ),\n),\n```\n\u003cimg src=\"https://github.com/salim-lachdhaf/searchable_dropdown/blob/master/screenshots/exa3.png?raw=true\" alt=\"Dropdown search\" width=\"400\" /\u003e\n\n\n```dart\nDropdownSearch\u003cString\u003e(\n  items: (filter, infiniteScrollProps) =\u003e ['Item 1', 'Item 2', 'Item 3'],\n  suffixProps: DropdownSuffixProps(\n    dropdownButtonProps: DropdownButtonProps(\n      iconClosed: Icon(Icons.keyboard_arrow_down),\n      iconOpened: Icon(Icons.keyboard_arrow_up),\n    ),\n  ),\n  decoratorProps: DropDownDecoratorProps(\n    textAlign: TextAlign.center,\n    decoration: InputDecoration(\n      contentPadding: EdgeInsets.symmetric(vertical: 20),\n      filled: true,\n      fillColor: Colors.white,\n      border: OutlineInputBorder(\n        borderSide: BorderSide(color: Colors.transparent),\n        borderRadius: BorderRadius.circular(12),\n      ),\n      focusedBorder: OutlineInputBorder(\n        borderSide: BorderSide(color: Colors.transparent),\n        borderRadius: BorderRadius.circular(12),\n      ),\n      enabledBorder: OutlineInputBorder(\n        borderSide: BorderSide(color: Colors.transparent),\n        borderRadius: BorderRadius.circular(12),\n      ),\n      hintText: 'Please select...',\n      hintStyle: TextStyle(fontWeight: FontWeight.bold, fontSize: 18, color: Colors.grey),\n    ),\n  ),\n  popupProps: PopupProps.menu(\n    itemBuilder: (context, item, isDisabled, isSelected) {\n      return Padding(\n        padding: const EdgeInsets.symmetric(vertical: 12.0),\n        child: Text(\n          item,\n          style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18),\n          textAlign: TextAlign.center,\n        ),\n      );\n    },\n    constraints: BoxConstraints(maxHeight: 160),\n    menuProps: MenuProps(\n      margin: EdgeInsets.only(top: 12),\n      shape: const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(12))),\n    ),\n  ),\n),\n```\n\u003cimg src=\"https://github.com/salim-lachdhaf/searchable_dropdown/blob/master/screenshots/exa5.png?raw=true\" alt=\"Dropdown search\" width=\"400\" /\u003e\n\n\n````dart\nDropdownSearch\u003cUserModel\u003e.multiSelection(\n  items: (filter, s) =\u003e getData(filter),\n  compareFn: (i, s) =\u003e i.isEqual(s),\n  popupProps: PopupPropsMultiSelection.bottomSheet(\n    bottomSheetProps: BottomSheetProps(backgroundColor: Colors.blueGrey[50]),\n    showSearchBox: true,\n    itemBuilder: userModelPopupItem,\n    suggestedItemProps: SuggestedItemProps(\n      showSuggestedItems: true,\n      suggestedItems: (us) {\n        return us.where((e) =\u003e e.name.contains(\"Mrs\")).toList();\n      },\n    ),\n  ),\n),\n````\n\u003cimg src=\"https://github.com/salim-lachdhaf/searchable_dropdown/blob/master/screenshots/exa6.gif?raw=true\" alt=\"Dropdown search\" width=\"400\" /\u003e\n\n\n````dart\nDropdownSearch\u003cint\u003e(\n  items: (f, cs) =\u003e List.generate(30, (i) =\u003e i + 1),\n  decoratorProps: DropDownDecoratorProps(\n    decoration: InputDecoration(labelText: \"Dialog with title\", hintText: \"Select an Int\"),\n  ),\n  popupProps: PopupProps.dialog(\n    title: Container(\n      decoration: BoxDecoration(color: Colors.deepPurple),\n      alignment: Alignment.center,\n      padding: EdgeInsets.symmetric(vertical: 16),\n      child: Text(\n        'Numbers 1..30',\n        style: TextStyle(fontSize: 21, fontWeight: FontWeight.bold, color: Colors.white70),\n      ),\n    ),\n    dialogProps: DialogProps(\n      clipBehavior: Clip.antiAlias,\n      shape: OutlineInputBorder(\n        borderSide: BorderSide(width: 0),\n        borderRadius: BorderRadius.circular(25),\n      ),\n    ),\n  ),\n),\n````\n\u003cimg src=\"https://github.com/salim-lachdhaf/searchable_dropdown/blob/master/screenshots/exa7.gif?raw=true\" alt=\"Dropdown search\" width=\"400\" /\u003e\n\n\u003c/details\u003e\n\n## Layout customization\nYou can customize the layout of the DropdownSearch and its items. click [here](https://github.com/salim-lachdhaf/searchable_dropdown/tree/master/example) for more examples.\n\nFull documentation [here](https://pub.dev/documentation/dropdown_search/latest/dropdown_search/DropdownSearch-class.html)\n\n\u003cdetails\u003e\u003csummary\u003eDropdownSearch Anatomy\u003c/summary\u003e\n    \u003cimg src=\"https://github.com/salim-lachdhaf/searchable_dropdown/blob/master/screenshots/anatomy.png?raw=true\" alt=\"Dropdown search\" width=\"800\" /\u003e\n\u003c/details\u003e\n\n\n## Support\n\nIf this plugin was useful to you, helped you to deliver your app, saved you a lot of time, or you just want to support the project, I would be very grateful if you buy me a cup of coffee.\n\n\u003ca href=\"https://www.buymeacoffee.com/SalimDev\" target=\"_blank\"\u003e\u003cimg src=\"https://www.buymeacoffee.com/assets/img/custom_images/purple_img.png\" alt=\"Buy Me A Coffee\" style=\"height: 41px !important;width: 174px !important;box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;-webkit-box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;\" \u003e\u003c/a\u003e\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsalim-lachdhaf%2Fdropdown_search","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsalim-lachdhaf%2Fdropdown_search","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsalim-lachdhaf%2Fdropdown_search/lists"}