All customizable css(font, fontsize. color, icon, result, dropdown decoration...)
Auto scroll to selected item position
dropdown is automatically placed. It's based on the position of the result on the screen.(top/bottom)
Support triangle arrow
Support overflow ellipsis
"COOL"
command:
$ flutter pub add cool_dropdown
pubspec.yaml:
dependencies:
cool_dropdown: ^ (latest)
import 'package:cool_dropdown/cool_dropdown.dart' ;
List dropdownItemList = [
{'label' : 'apple' , 'value' : 'apple' }, // label is required and unique
{'label' : 'banana' , 'value' : 'banana' },
{'label' : 'grape' , 'value' : 'grape' },
{'label' : 'pineapple' , 'value' : 'pineapple' },
{'label' : 'grape fruit' , 'value' : 'grape fruit' },
{'label' : 'kiwi' , 'value' : 'kiwi' },
];
CoolDropdown (
dropdownList: dropdownItemList,
onChange: (_) {},
defaultValue: dropdownItemList[3 ],
// placeholder: 'insert...',
)
option
Type
Default
Description
onChange
Function
required
when user selects one of the values, it's triggered. You must put one parameter in the Function. (ex. onChange: (a) {}).Then, you will get return selectedItem Map.
onOpen
Function
null
it returns parameter boolean depending on open/close the dropdown (ex. onOpen: (a) {}).
dropdownList
List
required
You have to declare a key, "label", all elements of the List
isAnimation
bool
true
turn on/off animation
import 'package:flutter_svg/flutter_svg.dart' ;
List dropdownItemList = [
{
'label' : 'apple' ,
'value' : 'apple' ,
'icon' : Container ( // if you want to use icon, you have to declare key as 'icon'
key: UniqueKey (), // you have to use UniqueKey()
height: 20 ,
width: 20 ,
child: SvgPicture .asset ( // I recommend to use this library, if you want to use svg extension
'assets/apple.svg' ,
),
),
'selectedIcon' : Container ( // if you want to use different icon when user select item, you have to declare key as 'selectedIcon'
key: UniqueKey (),
width: 20 ,
height: 20 ,
child: SvgPicture .asset (
'assets/apple.svg' ,
color: Color (0xFF6FCC76 ),
),
),
}
];
Result options(dropdown<v1.2.0> -> result<v1.3.0>)
option
Type
Default
Description
resultWidth
double
220
resultHeight
double
50
resultBD
BoxDecoration
below code
BoxDecoration of the result
resultTS
TextStyle
below code
TextStyle of the result
resultPadding
EdgeInsets
below code
Padding of the result
resultAlign
Alignment
below code
Alignment of the result in row
resultMainAxis
MainAxisAlignment
MainAxisAlignment.start
MainAxisAlignment of the result in row
resultReverse
bool
false
Reverse order of the result by row
labelIconGap
double
10
Gap between the label and icon
isResultLabel
bool
true
Show/hide the label of the result
isResultBoxLabel
bool
true
Show/hide the label of the dropdown
isResultIconLabel
bool
true
Show/hide the label and icon of the result
resultIconLeftGap
double
10
Gap left side of the result and icon
resultIcon
Widget
dropdown arrow icon
Icon of the result at right
resultIconRotation
bool
true
Rotation animation of the resultIcon
resultIconRotationValue
double
0.5
Rotation value of the resultIcon animation
placeholder
String
null
placeholderTS
TextStyle
below code
defaultValue
Map
null
Default selected value
gap
double
30
Gap between the result and dropdown
iconSize
double
10
the size of the dropdown arrow icon
resultBD = BoxDecoration (
color: Colors .white,
borderRadius: BorderRadius .circular (10 ),
boxShadow: [
BoxShadow (
color: Colors .grey.withOpacity (0.1 ),
spreadRadius: 1 ,
blurRadius: 10 ,
offset: Offset (0 , 1 ),
),
],
);
resultTS = TextStyle (
fontSize: 20 ,
color: Colors .black,
);
resultPadding = const EdgeInsets .only (left: 10 , right: 10 );
resultAlign = Alignment .centerLeft;
placeholderTS = TextStyle (color: Colors .grey.withOpacity (0.7 ), fontSize: 20 );
Dropdown & triangle options(dropdownBox<v1.2.0> -> dropdown<v1.3.0>)
option
Type
Default
Description
dropdownWidth
double
based on the resultWidth
dropdownHeight
double
300
dropdownBD
BoxDecoration
below code
BoxDecoration of the dropdown
dropdownPadding
EdgeInsets
below code
Padding of the dropdown
dropdownAlign
String
'center'
Only 'left', 'center', 'right' available
dropdownItemHeight
double
50
Height of items in the dropdown
dropdownItemGap
double
5
Gaps between items in the dropdown
dropdownItemTopGap
double
10
Gap between the first item and the dropdown top
dropdownItemBottomGap
double
10
Gap between the last item and the dropdown bottom
dropdownItemPadding
EdgeInsets
below code
Padding of dropdown
dropdownItemReverse
bool
false
reverse order(label, icon) of the dropdownItem by row
dropdownItemMainAxis
MainAxisAlignment
MainAxisAlignment.start
MainAxisAlignment of dropdown in row
isTriangle
bool
true
show/hide triangle arrow
triangleWidth
double
20
triangleHeight
double
20
triangleLeft
double
10
Left of the current triangle position
triangleAlign
String
'center'
Only 'left', 'center', 'right' available
selectedItemBD
BoxDecoration
below code
BoxDecoration of selectedItem
selectedItemTS
TextStyle
below code
TextStyle of selectedItem
selectedItemPadding
EdgeInsets
below code
Padding of selectedItem
unselectedItemTS
TextStyle
below code
TextStyle of unselectedItem
dropdownBD = BoxDecoration (
borderRadius: BorderRadius .circular (10 ),
color: Colors .white,
boxShadow: [
BoxShadow (
color: Colors .grey.withOpacity (0.1 ),
spreadRadius: 1 ,
blurRadius: 10 ,
offset: Offset (0 , 1 ),
),
],
);
dropdownPadding = const EdgeInsets .only (left: 10 , right: 10 );
dropdownItemPadding = const EdgeInsets .only (left: 10 , right: 10 );
selectedItemBD = BoxDecoration (
color: Color (0XFFEFFAF0 ),
borderRadius: BorderRadius .circular (10 ),
);
selectedItemTS = TextStyle (color: Color (0xFF6FCC76 ), fontSize: 20 );
selectedItemPadding = const EdgeInsets .only (left: 10 , right: 10 );
unselectedItemTS = TextStyle (
fontSize: 20 ,
color: Colors .black,
);