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 #

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>) #

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>) #

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