cool_dropdown 1.4.0

Customizable cool dropdown UI ✨ You can customize selected item, BoxDecoration of the dropdownBox, and dropdown input.

Cool drop down

Features

• 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"

Samples

Options map

Installing

command:

 $ flutter pub add cool_dropdown

pubspec.yaml:

dependencies:
  cool_dropdown: ^(latest)

Usage

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...',
            )

Important options

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,
          );