Flexible Dropdown Package

Features

• Customize dropdown

• Auto scroll to selected item position

• Support BarrierShape.headerTrans to highlight the content above the flexible dropdown button

• Allows the dropdown to be dismissed by tapping | panning the scrim or by pressing the escape key on the keyboard.

• Allow to choose the Animation Type

Installation

First, add flexible_dropdown as a dependency in your pubspec.yaml file.

dependencies:
  flexible_dropdown: ^1.0.5

Usage

FlexibleDropdown(
  overlayChild: Container(
    height: 160,
    width: double.infinity,
    color: Colors.deepPurple,
  ),
  barrierColor: Colors.black38.withOpacity(.2),
  barrierShape: BarrierShape.headerTrans,
  textDirection: TextDirection.ltr,
  offset: Offset.zero,
  duration: const Duration(milliseconds: 400),
  animationType: AnimationType.size,
  animationAlignment: Alignment.topCenter,
  child: Container(
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(6),
      color: Colors.blueAccent.withOpacity(.2),
    ),
    child: Padding(
      padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 20),
      child: Text(
        title,
        style: const TextStyle(fontSize: 14, fontWeight: FontWeight.w500),
      ),
    ),
  ),
)

Usage to close the flexible dropdown:

Navigator.pop(context);

Animation Type

scale	scaleX	scaleY
size	slide	fade
rotate

Note: AnimationType.size is only suitable for width of overlayChild is full screen width.