cool_dropdown 1.3.2
cool_dropdown: ^1.3.2 copied to clipboard

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 #

optionTypeDefaultDescription
onChangeFunctionrequiredwhen 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.
dropdownListListrequiredYou have to declare a key, "label", all elements of the List
isAnimationbooltrueturn 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>) #

optionTypeDefaultDescription
resultWidthdouble220
resultHeightdouble50
resultBDBoxDecorationbelow codeBoxDeocoration of the result
resultTSTextStylebelow codeTextStyle of the result
resultPaddingEdgeInsetsbelow codePadding of the result
resultAlignAlignmentbelow codeAlignment of the result in row
resultMainAxisMainAxisAlignmentMainAxisAlignment.startMainAxisAlignment of the result in row
resultReverseboolfalseReverse order of the result by row
labelIconGapdouble10Gap between the label and icon
isResultLabelbooltrueShow/hide the label of the result
isResultBoxLabelbooltrueShow/hide the label of the dropdown
isResultIconLabelbooltrueShow/hide the label and icon of the result
resultIconLeftGapdouble10Gap left side of the result and icon
resultIconWidgetbelow codeIcon of the result at right
resultIconRotationbooltrueRotation animation of the resultIcon
resultIconRotationValuedouble0.5Rotation value of the resultIcon animation
placeholderStringnull
placeholderTSTextStylebelow code
defaultValueMapnullDefault selected value
gapdouble30Gap between the result and dropdown
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);
optionTypeDefaultDescription
dropdownWidthdouble200
dropdownHeightdouble300
dropdownBDBoxDecorationbelow codeBoxDecoration of the dropdown
dropdownPaddingEdgeInsetsbelow codePadding of the dropdown
dropdownAlignString'center'Only 'left', 'center', 'right' available
dropdownItemHeightdouble50Height of items in the dropdown
dropdownItemGapdouble5Gaps between items in the dropdown
dropdownItemTopGapdouble10Gap between the first item and the dropdown top
dropdownItemBottomGapdouble10Gap between the last item and the dropdown bottom
dropdownItemPaddingEdgeInsetsbelow codePadding of dropdown
dropdownItemReverseboolfalsereverse order(label, icon) of the dropdownItem by row
dropdownItemMainAxisMainAxisAlignmentMainAxisAlignment.startMainAxisAlignment of dropdown in row
isTrianglebooltrueshow/hide triangle arrow
triangleWidthdouble20
triangleHeightdouble20
triangleLeftdouble10Left of the current triangle position
triangleAlignString'center'Only 'left', 'center', 'right' available
selectedItemBDBoxDecorationbelow codeBoxDecoration of selectedItem
selectedItemTSTextStylebelow codeTextStyle of selectedItem
selectedItemPaddingEdgeInsetsbelow codePadding of selectedItem
unselectedItemTSTextStylebelow codeTextStyle 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,
          );
13
likes
120
pub points
65%
popularity

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

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (LICENSE)

Dependencies

flutter

More

Packages that depend on cool_dropdown