{"id":49805797,"url":"https://github.com/birmehto/dropx","last_synced_at":"2026-05-12T20:40:42.071Z","repository":{"id":324057397,"uuid":"1095794802","full_name":"birmehto/DropX","owner":"birmehto","description":"A fully customizable dropdown package for Flutter with keyboard navigation support.","archived":false,"fork":false,"pushed_at":"2025-11-13T14:31:50.000Z","size":294,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-11-13T16:28:55.683Z","etag":null,"topics":["cross-platform","dart","dartlang","dropdown","dropdown-menu","dropdownlist","dropx","flutter","package"],"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/birmehto.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","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,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-11-13T14:28:28.000Z","updated_at":"2025-11-13T14:33:40.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/birmehto/DropX","commit_stats":null,"previous_names":["birmehto/dropx"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/birmehto/DropX","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/birmehto%2FDropX","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/birmehto%2FDropX/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/birmehto%2FDropX/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/birmehto%2FDropX/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/birmehto","download_url":"https://codeload.github.com/birmehto/DropX/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/birmehto%2FDropX/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32956818,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-12T09:19:52.626Z","status":"ssl_error","status_checked_at":"2026-05-12T09:17:33.438Z","response_time":102,"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":["cross-platform","dart","dartlang","dropdown","dropdown-menu","dropdownlist","dropx","flutter","package"],"created_at":"2026-05-12T20:40:40.479Z","updated_at":"2026-05-12T20:40:42.059Z","avatar_url":"https://github.com/birmehto.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"# DropX\n\nA fully customizable dropdown package for Flutter with keyboard navigation support.\n\n[![pub package](https://img.shields.io/pub/v/dropx.svg)](https://pub.dev/packages/dropx)\n[![License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)\n[![style: flutter_lints](https://img.shields.io/badge/style-flutter__lints-blue)](https://pub.dev/packages/flutter_lints)\n\n## Screenshots\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003cimg src=\"https://raw.githubusercontent.com/birmehto/dropx/main/screenshots/basic_dropdown.png\" width=\"250\" alt=\"Basic Dropdown\"/\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cimg src=\"https://raw.githubusercontent.com/birmehto/dropx/main/screenshots/search_filter.png\" width=\"250\" alt=\"Search \u0026 Filter\"/\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cimg src=\"https://raw.githubusercontent.com/birmehto/dropx/main/screenshots/clear_button.png\" width=\"250\" alt=\"Clear Button\"/\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eBasic Dropdown\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eSearch \u0026 Filter\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eClear Button\u003c/b\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\u003cimg src=\"https://raw.githubusercontent.com/birmehto/dropx/main/screenshots/custom_styling.png\" width=\"250\" alt=\"Custom Styling\"/\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003cimg src=\"https://raw.githubusercontent.com/birmehto/dropx/main/screenshots/form_validation.png\" width=\"250\" alt=\"Form Validation\"/\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eCustom Styling\u003c/b\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003cb\u003eForm Validation\u003c/b\u003e\u003c/td\u003e\n    \u003ctd\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003e 💡 **Try it yourself!** Run the example app to see all features in action:\n\u003e ```bash\n\u003e cd example \u0026\u0026 flutter run\n\u003e ```\n\n## Features\n\n- ✨ **Full keyboard navigation** - Arrow keys, Enter, Escape\n- 🔍 **Built-in search and filtering** - With custom filter support and debouncing\n- 📍 **Smart auto-positioning** - Shows above/below based on available space\n- 🎨 **Fully customizable styling** - Every color and dimension configurable\n- 🌈 **Theme-aware** - Automatically adapts to your app's theme\n- ⚡ **Loading states** - Built-in loading indicator support\n- 🎯 **Custom item builders** - Complete control over item rendering\n- 📱 **Responsive** - Works on all screen sizes\n- ♿ **Accessible** - Semantic labels and focus management\n- 🖱️ **Click outside to close** - Dropdown closes when clicking outside\n- 🔄 **Dynamic updates** - Items automatically update when data changes\n- ❌ **Clear button** - Optional clear button to reset selection\n- 📝 **Form validation** - Built-in FormField wrapper for easy form integration\n- ⏱️ **Search debouncing** - Optimize performance for large lists\n\n## Installation\n\n```yaml\ndependencies:\n  dropx: ^0.0.2\n```\n\n## Usage\n\n```dart\nimport 'package:dropx/dropx.dart';\n\nDropx\u003cString\u003e(\n  items: ['Apple', 'Banana', 'Cherry'],\n  focusNode: FocusNode(),\n  hint: 'Select a fruit',\n  onSelected: (value) =\u003e print(value),\n)\n```\n\n### Custom styling\n\n```dart\nDropx\u003cString\u003e(\n  items: items,\n  focusNode: focusNode,\n  hint: 'Select',\n  onSelected: (value) =\u003e print(value),\n  config: DropxConfig(\n    maxHeight: 400,\n    borderRadius: BorderRadius.circular(16),\n    showItemDividers: true,\n    style: DropxStyle(\n      overlayBackgroundColor: Colors.blue.shade50,\n      selectedItemBackgroundColor: Colors.blue.shade200,\n    ),\n  ),\n)\n```\n\n### Custom items\n\n```dart\nDropx\u003cUser\u003e(\n  items: users,\n  focusNode: focusNode,\n  hint: 'Select user',\n  displayText: (user) =\u003e user.name,\n  itemBuilder: (user, isSelected) {\n    return ListTile(\n      leading: CircleAvatar(child: Text(user.initials)),\n      title: Text(user.name),\n      subtitle: Text(user.email),\n    );\n  },\n  onSelected: (user) =\u003e print(user.name),\n)\n```\n\n### Custom filter\n\n```dart\nDropx\u003cProduct\u003e(\n  items: products,\n  focusNode: focusNode,\n  displayText: (product) =\u003e product.name,\n  customFilter: (product, query) {\n    return product.name.contains(query) || product.sku.contains(query);\n  },\n  onSelected: (product) =\u003e print(product.name),\n)\n```\n\n### Clear button\n\n```dart\nDropx\u003cString\u003e(\n  items: items,\n  focusNode: focusNode,\n  hint: 'Select',\n  onSelected: (value) =\u003e print(value),\n  showClearButton: true,\n  onClear: () =\u003e print('Selection cleared'),\n)\n```\n\n### Form validation\n\n```dart\nForm(\n  key: formKey,\n  child: DropxFormField\u003cString\u003e(\n    items: ['Option 1', 'Option 2', 'Option 3'],\n    hint: 'Select an option',\n    validator: (value) {\n      if (value == null) return 'Please select an option';\n      return null;\n    },\n    onSaved: (value) =\u003e print('Saved: $value'),\n  ),\n)\n```\n\n### Search debouncing\n\n```dart\nDropx\u003cString\u003e(\n  items: largeItemList,\n  focusNode: focusNode,\n  hint: 'Search...',\n  onSelected: (value) =\u003e print(value),\n  config: DropxConfig(\n    searchDebounce: Duration(milliseconds: 300),\n  ),\n)\n```\n\n### Async loading\n\n```dart\nclass MyWidget extends StatefulWidget {\n  @override\n  State\u003cMyWidget\u003e createState() =\u003e _MyWidgetState();\n}\n\nclass _MyWidgetState extends State\u003cMyWidget\u003e {\n  List\u003cString\u003e items = [];\n  bool isLoading = true;\n\n  @override\n  void initState() {\n    super.initState();\n    _loadItems();\n  }\n\n  Future\u003cvoid\u003e _loadItems() async {\n    // Simulate API call\n    await Future.delayed(Duration(seconds: 2));\n    setState(() {\n      items = ['Item 1', 'Item 2', 'Item 3'];\n      isLoading = false;\n    });\n  }\n\n  @override\n  Widget build(BuildContext context) {\n    return Dropx\u003cString\u003e(\n      items: items,\n      focusNode: FocusNode(),\n      hint: 'Select item',\n      onSelected: (value) =\u003e print(value),\n      isLoading: isLoading,\n    );\n  }\n}\n```\n\n## API Reference\n\n### Dropx Parameters\n\n| Parameter | Type | Description | Default |\n|-----------|------|-------------|---------|\n| `items` | `List\u003cT\u003e` | List of items to display | Required |\n| `focusNode` | `FocusNode` | Focus node for keyboard navigation | Required |\n| `onSelected` | `Function(T)` | Callback when item is selected | Required |\n| `hint` | `String?` | Placeholder text | `null` |\n| `initialValue` | `T?` | Initial selected value | `null` |\n| `displayText` | `String Function(T)?` | Custom text extractor | `toString()` |\n| `itemBuilder` | `Widget Function(T, bool)?` | Custom item widget builder | `null` |\n| `customFilter` | `bool Function(T, String)?` | Custom filter function | `null` |\n| `config` | `DropxConfig?` | Configuration options | `DropxConfig()` |\n| `header` | `Widget?` | Widget shown at top of dropdown | `null` |\n| `footer` | `Widget?` | Widget shown at bottom of dropdown | `null` |\n| `emptyWidget` | `Widget?` | Widget shown when no items | Default message |\n| `isLoading` | `bool` | Show loading indicator | `false` |\n| `enabled` | `bool` | Enable/disable dropdown | `true` |\n| `enableSearch` | `bool` | Enable search functionality | `true` |\n| `showClearButton` | `bool` | Show clear button when value selected | `false` |\n| `onClear` | `VoidCallback?` | Callback when clear button pressed | `null` |\n| `onChanged` | `ValueChanged\u003cString\u003e?` | Callback when text changes | `null` |\n| `semanticLabel` | `String?` | Accessibility label | `null` |\n\n### DropxConfig Options\n\nSee [ARCHITECTURE.md](ARCHITECTURE.md) for complete configuration options.\n\n## Performance Tips\n\n- Use `const` constructors where possible\n- Provide `displayText` for complex objects to avoid repeated `toString()` calls\n- Use `customFilter` for optimized filtering logic\n- Consider pagination for very large lists (\u003e1000 items)\n\n## Accessibility\n\nDropX includes built-in accessibility features:\n- Semantic labels for screen readers\n- Keyboard navigation support\n- Focus management\n- High contrast support through theme integration\n\n## More\n\nSee [ARCHITECTURE.md](ARCHITECTURE.md) for package details and [example/](example/) for more examples.\n\n## Contributing\n\nContributions are welcome! Please read [CONTRIBUTING.md](CONTRIBUTING.md) for details.\n\n## License\n\nMIT License - see [LICENSE](LICENSE) file.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbirmehto%2Fdropx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbirmehto%2Fdropx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbirmehto%2Fdropx/lists"}