Cool drop down #

Features #

• All customizable css
• 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 #

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()
      width: 20,
      height: 20,
      child: SvgPicture.asset(          // I recommend to use this library
        '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: Colors.white.withOpacity(0.7),
      ),
    ),
  }
]

Dropdown options #

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

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