Cool Dropdown Plus

An improved and maintained version of the original cool_dropdown package. This package provides a highly customizable dropdown with various animations and styles, now with critical bug fixes, native UX improvements, and performance optimizations.

Why Cool Dropdown Plus?

This fork addresses major issues found in the original package:

• Native UX: Added Splash (Ripple) and Hover effects. The dropdown now feels responsive and native (Material style).
• Reliable State Updates: Fixed a critical bug where defaultItem wouldn't update if the parent widget rebuilt. No more need for UniqueKey() hacks.
• Fixed Widget Recycling Bug: Solved the issue where items in long lists (15+ items) were incorrectly highlighted due to state reuse.
• Fixed Crash: Prevents the app from crashing when opening/closing the dropdown too quickly.
• Performance: Optimized rendering for smoother scrolling and animations.

It is a drop-in replacement. You don't need to change your code logic, just the import.

Features

• Fully customizable styles (font, color, icon, result box, dropdown decoration, etc.).
• New: Splash and Hover effects customization.
• Auto scroll to the selected item.
• Automatic placement (dropdown opens up or down based on screen position).
• Marquee effect for long text.
• Customizable animations.
• Error handling support.

Samples

Installing

Run this command:

$ flutter pub add cool_dropdown_plus

Or add this to your pubspec.yaml:

dependencies:
  cool_dropdown_plus: ^1.1.0

Usage

Import the package:

import 'package:cool_dropdown_plus/cool_dropdown_plus.dart';

Use CoolDropdown widget (API matches the original):

CoolDropdown<String>(
  controller: dropdownController,
  dropdownList: dropdownItems,
  defaultItem: null,
  onChange: (value) {
    print(value);
  },
  resultOptions: const ResultOptions(
    width: 200,
    render: ResultRender.all,
    placeholder: 'Select Item',
    isSplash: true, // Enable splash effect
  ),
  dropdownOptions: const DropdownOptions(
    width: 200,
    height: 400,
    gap: DropdownGap.all(5),
  ),
  dropdownItemOptions: const DropdownItemOptions(
    isMarquee: true,
    mainAxisAlignment: MainAxisAlignment.start,
    render: DropdownItemRender.all,
    height: 50,
  ),
);

Options

Cool Dropdown Options

Option	Type	Default	Description
dropdownList	List<CoolDropdownItem	[]	Dropdown item list.
defaultItem	CoolDropdownItem	null	Default item of the dropdown.
onChange	Function(T)	required	When user selects one of the items, you will get T type value.
onOpen	Function(bool)	null	When user either open or close the dropdown, you will get bool value.
resultOptions	ResultOptions	-	Styling for the closed dropdown (button).
dropdownOptions	DropdownOptions	-	Styling for the opened list container.
dropdownItemOptions	DropdownItemOptions	-	Styling for individual items in the list.
dropdownTriangleOptions	DropdownTriangleOptions	-	Styling for the arrow triangle.
dropdownController	DropdownController	required	Controller to manage state (open/close/error).

Result Options

Option	Type	Default	Description
width	double	220	Width of the result box.
height	double	50	Height of the result box.
isSplash	bool	true	(New) Enable splash (ripple) effect on tap.
splashColor	Color?	null (default grey)	(New) Color of the splash effect.
highlightColor	Color?	null (default grey)	(New) Color of the hover/highlight effect.
space	double	10	Space between (label + icon) and arrow icon.
padding	EdgeInsets	EdgeInsets.zero	Padding inside the result box.
alignment	Alignment	Alignment.center	Alignment of (label + icon).
render	ResultRender	ResultRender.all	Set the order of elements (icon, label, etc.).
boxDecoration	BoxDecoration	-	Decoration of the result box.
openBoxDecoration	BoxDecoration	-	Decoration when result box is open.
errorBoxDecoration	BoxDecoration	-	Decoration when result box is in error state.
textStyle	TextStyle	-	TextStyle of the label.
placeholderTextStyle	TextStyle	-	TextStyle of the placeholder.
textOverflow	TextOverFlow	-	TextOverflow behavior.
isMarquee	bool	false	Enable marquee effect on overflow.
duration	Duration	Duration(milliseconds: 300)	Animation duration when value changes.

Dropdown Options

Option	Type	Default	Description
width	double?	result width	Dropdown width.
height	double	50	Dropdown height (max).
top	double	0	Top offset.
left	double	0	Left offset.
color	Color	Colors.white	Dropdown background color.
borderRadius	BorderRadius	BorderRadius.circular(10)	Border radius.
shadow	List	[]	Shadows list.
animationType	DropdownAnimationType	DropdownAnimationType.scale	Open animation type.
align	DropdownAlign	DropdownAlign.center	Alignment relative to the result box.
selectedItemAlign	SelectedItemAlign	SelectedItemAlign.center	Scroll alignment of the selected item.
gap	DropdownGap	DropdownGap.zero	Gaps between items and edges.
duration	Duration	Duration(milliseconds: 300)	Scroll animation duration.

Dropdown Item Options

Option	Type	Default	Description
height	double	50	Item height.
isSplash	bool	true	(New) Enable splash (ripple) effect on tap.
splashColor	Color?	null (default grey)	(New) Color of the splash effect.
highlightColor	Color?	null (default grey)	(New) Color of the hover/highlight effect.
padding	EdgeInsets	EdgeInsets.symmetric(horizontal: 10)	Item padding.
alignment	Alignment	Alignment.centerLeft	Content alignment.
mainAxisAlignment	MainAxisAlignment	MainAxisAlignment.start	Row alignment.
render	DropdownItemRender	DropdownItemRender.all	Render order (label/icon).
boxDecoration	BoxDecoration	-	Item background decoration.
selectedBoxDecoration	BoxDecoration	-	Decoration when item is selected.
textStyle	TextStyle	-	Label style.
selectedTextStyle	TextStyle	-	Selected label style.
isMarquee	bool	false	Marquee effect for items.

Dropdown Controller

Option	Type	Description
open	method	Open the dropdown programmatically.
close	method	Close the dropdown programmatically.
error	method	Trigger error state (visual feedback).
resetError	method	Clear error state.
resetValue	method	Reset the selected value to null/default.

Credits

• Original package by joo6077.
• Maintained and improved by p5ych0p41h.

If you find this package helpful, consider checking out the original author's work as well.