flex_dropdown 0.2.0

This package enables you to easily implement dropdowns with custom styling, animations, and data sources to match your app's needs.

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.

https://github.com/Snapp-X/custom_drop_down/assets/47558577/2c99d33b-f631-4a01-9c29-08475af363af

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';

Online Demo

You can view an interactive online example of Flex DropDown at the following link: Flex DropDown Online Example.

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,
      dismissOnTapOutside: true, // Set to true to allow dismissal on outside tap
      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.