Create elegant and customizable dropdowns effortlessly with the Flex DropDown package

by Flutter Awesome

Flex DropDown | Custom DropDown

Create elegant and customizable dropdowns effortlessly with the Flex DropDown package. This Flutter package enables you to easily implement dropdowns with custom styling, animations, and data sources to match your app’s needs.

20230824_120955.mp4

Getting Started

If you’re interested in the background story behind this package’s development, you can read our article on Medium: Creating Custom Dropdowns with OverlayPortal in Flutter.

To get started with the Flex DropDown package, ensure you have Flutter installed and a basic understanding of how Flutter packages work. You can follow the instructions below to integrate the package into your project:

  • Add the following line to your pubspec.yaml file:

dependencies:
  flex_dropdown: ^0.1.0
  • Run the following command to fetch the package:
flutter pub get
  • Import the package in your Dart code:
import 'package:flex_dropdown/flex_dropdown.dart';

Usage

Here’s a simple example showcasing the usage of the Flex DropDown package:

  final OverlayPortalController _controller = OverlayPortalController();

  @override
  Widget build(BuildContext context) {
    return RawFlexDropDown(
      controller: _controller,
      buttonBuilder: (context, onTap) {
        return ButtonWidget(
          width: 500,
          onTap: onTap,
        );
      },
      menuBuilder: (context, width) {
        return Padding(
          padding: const EdgeInsets.only(top: 4),
          child: MenuWidget(
            width: width,
            onItemTap: () {
              _controller.hide();
            },
          ),
        );
      },
    );
  }

For a complete example, you can explore the code in the example folder of the repository.

Additional information

If you encounter any issues, have suggestions, or want to contribute to the package, feel free to open an issue or submit a pull request on the GitHub repository.

We value community feedback and aim to provide timely responses to any queries or concerns you may have.

GitHub

View Github