{"id":17713533,"url":"https://github.com/gmadhu27/flutter_custom_dropdown","last_synced_at":"2026-01-24T14:05:28.982Z","repository":{"id":258571523,"uuid":"873986246","full_name":"gmadhu27/flutter_custom_dropdown","owner":"gmadhu27","description":"A customizable dropdown package for Flutter that allows developers to display a dropdown using bottom sheets or a full-screen modal. This package supports dynamic item rendering with optional itemBuilder, customizable search functionality, and three different bottom sheet display modes.","archived":false,"fork":false,"pushed_at":"2024-10-23T05:42:39.000Z","size":354,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-05T18:22:36.809Z","etag":null,"topics":["android","bottomsheet","custom","dropdown","flutter","ios","web"],"latest_commit_sha":null,"homepage":"","language":"C++","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gmadhu27.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":"2024-10-17T04:06:49.000Z","updated_at":"2024-10-23T03:45:17.000Z","dependencies_parsed_at":"2024-10-23T09:13:33.546Z","dependency_job_id":null,"html_url":"https://github.com/gmadhu27/flutter_custom_dropdown","commit_stats":null,"previous_names":["gmadhu27/flutter_custom_dropdown"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/gmadhu27/flutter_custom_dropdown","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gmadhu27%2Fflutter_custom_dropdown","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gmadhu27%2Fflutter_custom_dropdown/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gmadhu27%2Fflutter_custom_dropdown/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gmadhu27%2Fflutter_custom_dropdown/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gmadhu27","download_url":"https://codeload.github.com/gmadhu27/flutter_custom_dropdown/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gmadhu27%2Fflutter_custom_dropdown/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28729411,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-24T10:24:43.181Z","status":"ssl_error","status_checked_at":"2026-01-24T10:24:36.112Z","response_time":89,"last_error":"SSL_read: 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":["android","bottomsheet","custom","dropdown","flutter","ios","web"],"created_at":"2024-10-25T10:05:12.341Z","updated_at":"2026-01-24T14:05:28.963Z","avatar_url":"https://github.com/gmadhu27.png","language":"C++","funding_links":[],"categories":[],"sub_categories":[],"readme":"## flutter_custom_dropdown_list\n\nA customizable dropdown package for Flutter that allows developers to display a dropdown using bottom sheets or a full-screen modal. This package supports dynamic item rendering with optional itemBuilder, customizable search functionality, and three different bottom sheet display modes, making it easy to integrate into any Flutter project.\n\n\n## Features\n* Customizable Items: Use dynamic items of any type and display them using an optional itemBuilder.\n* Multiple Bottom Sheet Modes: Supports modal, normal, and full-screen modes for the dropdown.\n* Search Functionality: Easily enable or disable search in the dropdown to filter items.\n* Generic Support: Allows usage of any class or data model as dropdown items.\n* ToString Validation: Automatically checks if your custom class overrides the toString() method to ensure proper display.\n* Optional ItemBuilder: Customize the way items are displayed using a builder function or default to a ListTile.\n* Optional itemSearchCondition: Optional search functionality is an optional parameter that allows to define custom logic for searching through the dropdown items.\n* Optional customizable color and theming for dropdown and search UI.\n\n\n## Getting started\nTo use the package, add flutter_custom_dropdown_list to your pubspec.yaml:\n\n```dart\ndependencies:\n flutter_custom_dropdown_list: ^1.0.1\n\n```\n\nor \n\n```dart\ndependencies:\n  flutter_custom_dropdown_list:\n    git:\n      url:https://github.com/gmadhu27/flutter_custom_dropdown.git\n\n```\n\nMake sure to import the package in your Dart files:\n```dart\nimport 'package:flutter_custom_dropdown_list/flutter_custom_dropdown.dart';\n```\n\n## Usage\nHere’s a basic example of how to use the CustomDropdownHelper to show a dropdown with custom items and an optional search bar:\n\nSimple Dropdown Example:\n\n```dart\nimport 'package:flutter/material.dart';\nimport 'package:flutter_custom_dropdown_list/flutter_custom_dropdown.dart';\n\nvoid main() {\n  runApp(MyApp());\n}\n\nclass MyApp extends StatelessWidget {\n  @override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      title: 'Custom Dropdown Example',\n      home: Scaffold(\n        appBar: AppBar(\n          title: const Text('Custom Dropdown Example'),\n        ),\n        body: const Padding(\n          padding: EdgeInsets.all(16.0),\n          child: DropdownExample(),\n        ),\n      ),\n    );\n  }\n}\n\nclass DropdownExample extends StatelessWidget {\n  const DropdownExample({super.key});\n\n  @override\n  Widget build(BuildContext context) {\n    final items = [\n      DropdownItem(id: \"1\", name: 'Item 1'),\n      DropdownItem(id: \"2\", name: 'Item 2'),\n      DropdownItem(id: \"3\", name: 'Item 3'),\n    ];\n\n    return Center(\n      child: ElevatedButton(\n        onPressed: () {\n          CustomDropdownHelper.showDropdown\u003cDropdownItem\u003e(\n            context: context,\n            items: items,\n            title: \"Select an Item\",\n            onItemSelected: (item) {\n              if (item != null) {\n                print(\"Selected: ${item.name}\");\n              }\n            },\n            itemBuilder: (item) {\n              return ListTile(\n                title: Text(item.name),\n                subtitle: Text(\"ID: ${item.id}\"),\n              );\n            },\n          );\n        },\n        child: const Text(\"Show Dropdown\"),\n      ),\n    );\n  }\n}\n```\n## DropdownItem Class Example\nHere is a basic example of a DropdownItem class, which is used in the dropdown. This class implements the toString() method to ensure proper display of the item names.\n\n```dart\nclass DropdownItem {\n  final String id;\n  final String name;\n\n  DropdownItem({required this.id, required this.name});\n\n  @override\n  String toString() =\u003e name; // Override toString for display purposes\n}\n```\n## Searchable Dropdown Example\n```dart\nCustomDropdownHelper.showDropdown\u003cDropdownItem\u003e(\n  context: context,\n  items: myItemsList, // List of DropdownItem or custom class\n  title: \"Select an Occupation\",\n  showSearch: true, // Enable search functionality\n  onItemSelected: (selectedItem) {\n    // Handle the selected item\n    print('Selected: ${selectedItem.name}');\n  },\n);\n```\n## Optional itemSearchCondition\nThe itemSearchCondition is an optional parameter that allows you to define custom logic for searching through the dropdown items. Here’s an example of how to use the dropdown in your Flutter app, including the optional itemSearchCondition for custom search behavior:\n\n```dart\nCustomDropdownHelper.showDropdown\u003cDropdownItem\u003e(\n  context: context,\n  items: items,\n  title: 'Select Item',\n  onItemSelected: (selectedItem) {\n  print('Selected: ${selectedItem?.name}');\n   }, \n  showSearch: true,\n  itemSearchCondition: (item, searchText) {\n   // Custom search condition: match both id and name\n   return item.name.toLowerCase().contains(searchText.toLowerCase()) ||\n    item.id.contains(searchText);\n },\n);\n```\nIn the example above, the search checks if the name or id of the item contains the search text. You can customize this to fit your specific data structure and search needs.\n\nIf itemSearchCondition is not provided, the dropdown will use the default behavior of matching the toString() method for filtering items during search.\n\n## Bottom Sheet Modes\nYou can display the dropdown using three different modes:\n\n* Normal (default): Displays a normal bottom sheet that does not cover the screen fully.\n* Modal: This displays the dropdown as a modal bottom sheet.\n* Full-Screen: Displays the dropdown in full-screen mode.\n  \n```dart\nCustomDropdownHelper.showDropdown\u003cDropdownItem\u003e(\n  context: context,\n  items: myItemsList,\n  title: \"Choose Item\",\n  bottomSheetMode: BottomSheetMode.full, // Full-screen mode\n  onItemSelected: (selectedItem) {\n    print('Selected: ${selectedItem.name}');\n  },\n);\n```\n## Custom Item Display\nYou can provide a custom item builder to display items in the dropdown. If not provided, the package defaults to a ListTile using the toString() method of the items.\n```dart\nCustomDropdownHelper.showDropdown\u003cDropdownItem\u003e(\n  context: context,\n  items: myItemsList,\n  title: \"Custom Item Display\",\n  itemBuilder: (item) {\n    return Card(\n      child: ListTile(\n        title: Text(item.name),\n        subtitle: Text(\"ID: ${item.id}\"),\n      ),\n    );\n  },\n  onItemSelected: (selectedItem) {\n    print('Selected: ${selectedItem.name}');\n  },\n);\n```\n## Custom Dropdown Theme\nYou can create customizable dropdowns with themes for background color, text style, icons, and more. Here’s an example of how to use it.\n\n```dart\nCustomDropdownHelper.showDropdown(\n  context: context,\n  items: items,\n  title: \"Select an Item\",\n  // Bottom sheet mode (optional, default is normal mode)\n  bottomSheetMode: BottomSheetMode.full,\n  // Show search bar (optional, default is true)\n  showSearch: true,\n  onItemSelected: (DropdownItem? selectedItem) {\n    // Handle the selected item\n    setState(() {\n      _selectedItemName = selectedItem?.name;\n    });\n  },\n  // Custom item builder (optional)\n  itemBuilder: (item) {\n    return ListTile(\n      title: Text(item.name),\n      subtitle: Text(item.id),\n    );\n  },\n  // Custom search logic (optional)\n  itemSearchCondition: (item, searchText) {\n    return item.id.toLowerCase().contains(searchText) ||\n        item.name.toLowerCase().contains(searchText);\n  },\n  // Apply CustomDropdownTheme (optional)\n  theme: CustomDropdownTheme(\n    // Background color for the dropdown (optional)\n    backgroundColor: Colors.deepOrange,\n    // Back icon color (optional)\n    backIconColor: Colors.white,\n    // Title text style (optional)\n    titleTextStyle: const TextStyle(color: Colors.white, fontSize: 22),\n    // Search box decoration (optional)\n    searchBoxDecoration: InputDecoration(\n      hintText: 'Search here',\n      hintStyle: const TextStyle(color: Colors.white, fontSize: 18),\n      filled: true,\n      fillColor: Colors.orange.shade100,\n      border: OutlineInputBorder(\n        borderRadius: BorderRadius.circular(10),\n        borderSide: const BorderSide(color: Colors.orange, width: 2),\n      ),\n      prefixIcon: const Icon(Icons.search, color: Colors.white),\n    ),\n    // Bottom sheet box decoration (optional)\n    bottomSheetBoxDecoration: const BoxDecoration(\n      color: Colors.deepOrange,\n      borderRadius: BorderRadius.vertical(top: Radius.circular(30.0)),\n    ),\n  ),\n);\n```\n## CustomDropdownTheme Properties\n| Property | Type | Description |\n| -------- | ---- | :------: |\n| backgroundColor | Color? | The background color of the dropdown and the bottom sheet. Default is Colors.grey.withOpacity(0.6). |\n| backIconColor | Color? | The color of the back icon or close button. Default is Colors.black. |\n| titleTextStyle | TextStyle? | The text style for the title of the dropdown or bottom sheet. |\n| searchBoxDecoration | InputDecoration? | Custom decoration for the search box input field, including hint text, border, and prefix icon. |\n| bottomSheetBoxDecoration | BoxDecoration? | Custom decoration for the bottom sheet, allowing you to control background color, shape, etc. |\n\n1. Background Color: You can change the background color of the dropdown by passing a custom color to the backgroundColor property. This affects the entire bottom sheet background.\n\n```dart\nbackgroundColor: Colors.deepOrange\n```\n2. Back Icon Color: You can change the backicon color of the dropdown by passing a custom color to the backIconColor property. This affects the entire bottom sheet close icon.\n\n```dart\nbackIconColor: Colors.deepOrange\n```\n3. Title Text Style: Modify the appearance of the title text inside the dropdown by using the titleTextStyle property. This allows for font size, color, and weight adjustments.\n\n```dart\ntitleTextStyle: TextStyle(color: Colors.white, fontSize: 22)\n```\n4. Search Box Decoration: Customize the look of the search input field by passing a custom InputDecoration to searchBoxDecoration. You can change the hint text, input border, and the prefix icon.\n\n```dart\nsearchBoxDecoration: InputDecoration(\n  hintText: 'Search here',\n  hintStyle: TextStyle(color: Colors.white, fontSize: 18),\n  filled: true,\n  fillColor: Colors.orange.shade100,\n  border: OutlineInputBorder(\n    borderRadius: BorderRadius.circular(10),\n    borderSide: BorderSide(color: Colors.orange, width: 2),\n  ),\n  prefixIcon: Icon(Icons.search, color: Colors.white),\n)\n```\n5. Bottom Sheet Box Decoration: Customize the shape and color of the bottom sheet using the bottomSheetBoxDecoration. You can modify the shape by adding a border radius.\n\n```dart\nbottomSheetBoxDecoration: BoxDecoration(\n  color: Colors.deepOrange,\n  borderRadius: BorderRadius.vertical(top: Radius.circular(30.0)),\n)\n```\n\n## Exception Handling\n* Empty List: If the items list is empty, an exception will be thrown to notify the developer.\n* ToString Check: The package checks if the class used for the items overrides the toString() method. If not, an exception will be thrown, ensuring that the dropdown can display items correctly.\n\n\n## Additional information\nFeel free to contribute to this package, raise issues, or suggest new features by creating an issue in this GitHub repository. This package is open-source, and contributions are always welcome.\n\nFor more details and examples, visit the /example folder.\n\nThis README provides a concise overview of how to use the package, examples, and additional information for users. You can modify the details based on your specific project requirements, including the repository link or contributing guidelines.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgmadhu27%2Fflutter_custom_dropdown","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgmadhu27%2Fflutter_custom_dropdown","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgmadhu27%2Fflutter_custom_dropdown/lists"}