CustomDropDown

CustomDropDown is an enhanced dropdown menu widget for Flutter that provides extensive customization options beyond the default DropdownButton. Built using Flutter's Overlay API, it offers better control over appearance, behavior, and animations while maintaining native performance.

✨ Key Features

• Fully customizable styling (colors, borders, shadows)
• Programmatic control of dropdown state
• Auto-scrolling to selected item
• Flexible sizing options (width, height, max height)
• Custom display mapping for complex objects
• Hover and selection states
• Overlay-based implementation (works anywhere in widget tree)
• Smooth animations with configurable properties

Installation

Add the dependency to your pubspec.yaml:

dependencies:
  apptomate_custom_drop_down: ^0.0.3

💡 Basic Usage

Simple String Dropdown

CustomDropDown<String>(
  items: ['Option 1', 'Option 2', 'Option 3'],
  value: selectedValue,
  onChanged: (value) => setState(() => selectedValue = value),
)

Custom Object Dropdown

CustomDropDown<User>(
  items: userList,
  value: selectedUser,
  displayMapper: (user) => user.name,
  onChanged: (user) => setState(() => selectedUser = user),
)

Styled Dropdown

CustomDropDown(
  items: options,
  value: selectedOption,
  backgroundColor: Colors.white,
  borderColor: Colors.blue,
  focusedBorderColor: Colors.blueAccent,
  borderRadius: 12,
  elevation: 4,
  onChanged: (value) => setState(() => selectedOption = value),
)

⚙️ Configuration Options

🌟 Best Practices

1. For Complex Objects

   CustomDropDown<Product>(
     items: products,
     value: selectedProduct,
     displayMapper: (p) => p.name,
     onChanged: (p) => setState(() => selectedProduct = p),
   )
   

2. Styling Consistency

   // Define theme constants
   const dropdownTheme = DropdownTheme(
     backgroundColor: Colors.white,
     borderColor: AppColors.primary,
     borderRadius: 8,
   );
   
   // Reuse across app
   CustomDropDown(
     ...,
     backgroundColor: dropdownTheme.backgroundColor,
     borderColor: dropdownTheme.borderColor,
   )
   

3. Performance Tips

   • Use const constructors for static options
   • Avoid very long dropdown lists (use searchable dropdown instead)
   • For >50 items, consider virtualization

4. Accessibility

   • Ensure sufficient color contrast
   • Provide meaningful text alternatives
   • Support keyboard navigation

🔄 Comparison with Flutter's DropdownButton