cool_dropdown 1.1.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, dropdown box decoration...)
• Auto scroll to selected item position
• dropdownBox is automatically placed. It's based on the position of the dropdown 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.
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),
      ),
    ),
  }
];

Dropdown options

option	Type	Default	Description
dropdownWidth	double	220
dropdownHeight	double	50
dropdownBD	BoxDecoration	below code	BoxDeocoration of the dropdown
dropdownTS	TextStyle	below code	TextStyle of the dropdown
dropdownPadding	EdgeInsets	below code	Padding of the dropdown
dropdownAlign	Alignment	below code	Alignment of the dropdown in row
dropdownMainAxis	MainAxisAlignment	MainAxisAlignment.start	MainAxisAlignment of the dropdown in row
dropdownReverse	bool	false	Reverse order of the dropdown by row
labelIconGap	double	10	Gap between the label and icon
isDropdownLabel	bool	true	Show/hide the label of the dropdown
isDropdownBoxLabel	bool	true	Show/hide the label of the dropdownBox
isDropdownIconLabel	bool	true	Show/hide the label and icon of the dropdown
dropdownIconLeftGap	double	10	Gap left side of the dropdown and icon
dropdownIcon	Widget	below code	Icon of the dropdown at right
dropdownIconRotation	bool	true	Rotation animation of the dropdownIcon
dropdownIconRotationValue	double	0.5	Rotation value of the dropdownIcon animation
placeholder	String	null
placeholderTS	TextStyle	below code
defaultValue	Map	null	Default selected value
gap	double	30	Gap between the dropdown and dropdownBox

dropdownBD = BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(10),
          boxShadow: [
            BoxShadow(
              color: Colors.grey.withOpacity(0.1),
              spreadRadius: 1,
              blurRadius: 10,
              offset: Offset(0, 1),
            ),
          ],
        );

dropdownTS = TextStyle(
            fontSize: 20,
            color: Colors.black,
          );

dropdownPadding = const EdgeInsets.only(left: 10, right: 10);

dropdownAlign = Alignment.centerLeft;

placeholderTS = TextStyle(color: Colors.grey.withOpacity(0.7), fontSize: 20);

DropdownBox & triangle options

option	Type	Default	Description
dropdownBoxWidth	double	200
dropdownBoxHeight	double	300
dropdownBoxBD	BoxDecoration	below code	BoxDecoration of the dropdownBox
dropdownBoxPadding	EdgeInsets	below code	Padding of the dropdownBox
dropdownBoxAlign	String	'center'	Only 'left', 'center', 'right' available
dropdownItemHeight	double	50	Height of items in the dropdownBox
dropdownItemGap	double	5	Gaps between items in the dropdownBox
dropdownItemTopGap	double	10	Gap between the first item and the dropdownBox top
dropdownItemBottomGap	double	10	Gap between the last item and the dropdownBox bottom
dropdownItemPadding	EdgeInsets	below code	Padding of dropdownBox
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

dropdownBoxBD = BoxDecoration(
          borderRadius: BorderRadius.circular(10),
          color: Colors.white,
          boxShadow: [
            BoxShadow(
              color: Colors.grey.withOpacity(0.1),
              spreadRadius: 1,
              blurRadius: 10,
              offset: Offset(0, 1),
            ),
          ],
        );

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