apptomate_custom_dropdown 0.0.3

This CustomDropDown widget is a reusable, customizable dropdown widget in Flutter that allows you to create dropdown menus with enhanced styling and behavior.

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

Parameter	Type	Description	Default
items	List<T>	Required list of options	-
value	T?	Currently selected value	-
onChanged	ValueChanged<T?>	Selection callback	-
hint	String	Placeholder text	'Select an option'
backgroundColor	Color	Background color	Colors.white
borderColor	Color	Border color	Colors.grey
focusedBorderColor	Color?	Focused border color	null
borderRadius	double	Corner radius	8.0
elevation	double	Shadow elevation	2.0
width	double?	Fixed width	null
height	double	Input height	48.0
dropdownMaxHeight	double?	Max dropdown height	200
displayMapper	String Function(T)?	Custom item display	toString()
isExpanded	bool	Expand to parent width	false

🌟 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

Feature	CustomDropDown	DropdownButton
Customization	Extensive	Limited
Object Support	Any type	String only
Positioning	Overlay-based	Parent-constrained
Styling	Full control	Theme-dependent
Performance	Optimized	Standard
Scroll Control	Auto-scroll to selection	Basic
Required Context	Works anywhere	Needs Material