DropdownButton2

https://pub.dev/documentation/dropdown_button2/latest/
Admin
DropdownButton2 is a Flutter package that provides an enhanced dropdown button widget with...
Tokens:42,098
Snippets:406
Trust Score:9.9
Update:5 months ago
Show doc for...
Tokens:
Raw
### Example createState Implementation

Source: https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/DropdownButton2/createState.html

Subclasses should override this method to return a newly created instance of their associated State subclass. This example shows a typical implementation for a custom widget.

```dart
@override
State<SomeWidget> createState() => _SomeWidgetState();

```

--------------------------------

### Implement Searchable Dropdown with DropdownButton2

Source: https://pub.dev/documentation/dropdown_button2/latest/index.html

This example shows how to configure DropdownButton2 for searchable functionality. It includes setting up items, controllers, and handling menu state changes to clear the search input when the menu closes.

```dart
final List<String> items = [
  'A_Item1',
  'A_Item2',
  'A_Item3',
  'A_Item4',
  'B_Item1',
  'B_Item2',
  'B_Item3',
  'B_Item4',
];

final valueListenable = ValueNotifier<String?>(null);
final TextEditingController textEditingController = TextEditingController();

@override
void dispose() {
  textEditingController.dispose();
  super.dispose();
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      child: DropdownButtonHideUnderline(
        child: DropdownButton2<String>(
          isExpanded: true,
          hint: Text(
            'Select Item',
            style: TextStyle(
              fontSize: 14,
              color: Theme.of(context).hintColor,
            ),
          ),
          items: items
              .map(
                (item) => DropdownItem(
                  value: item,
                  height: 40,
                  child: Text(
                    item,
                    style: const TextStyle(
                      fontSize: 14,
                    ),
                  ),
                ),
              )
              .toList(),
          valueListenable: valueListenable,
          onChanged: (value) {
            valueListenable.value = value;
          },
          buttonStyleData: const ButtonStyleData(
            padding: EdgeInsets.symmetric(horizontal: 16),
            height: 40,
            width: 200,
          ),
          dropdownStyleData: const DropdownStyleData(
            maxHeight: 200,
          ),
          dropdownSearchData: DropdownSearchData(
            searchController: textEditingController,
            searchBarWidgetHeight: 50,
            searchBarWidget: Container(
              height: 50,
              padding: const EdgeInsets.only(
                top: 8,
                bottom: 4,
                right: 8,
                left: 8,
              ),
              child: TextFormField(
                expands: true,
                maxLines: null,
                controller: textEditingController,
                decoration: InputDecoration(
                  isDense: true,
                  contentPadding: const EdgeInsets.symmetric(
                    horizontal: 10,
                    vertical: 8,
                  ),
                  hintText: 'Search for an item...', 
                  hintStyle: const TextStyle(fontSize: 12),
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(8),
                    gapPadding: 0,
                  ),
                ),
              ),
            ),
            noResultsWidget: const Padding(
              padding: EdgeInsets.all(8),
              child: Text('No Item Found!'),
            ),
            searchMatchFn: (item, searchValue) {
              return item.value.toString().contains(searchValue);
            },
          ),
          //This to clear the search value when you close the menu
          onMenuStateChange: (isOpen) {
            if (!isOpen && mounted) {
              textEditingController.clear();
            }
          },
        ),
      ),
    ),
  );
}
```

--------------------------------

### DropdownButtonFormField2 with Form Example

Source: https://pub.dev/documentation/dropdown_button2/latest/index.html

Use this snippet to create a form with a text field and a dropdown for gender selection. It includes validation for both fields and demonstrates state management with ValueNotifier. Ensure `DropdownButtonFormField2` and `IconStyleData`, `DropdownStyleData`, `MenuItemStyleData` are imported.

```dart
final List<String> genderItems = [
  'Male',
  'Female',
];
final valueListenable = ValueNotifier<String?>(null);

final _formKey = GlobalKey<FormState>();

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Form(
      key: _formKey,
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 80),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TextFormField(
              decoration: InputDecoration(
                contentPadding: const EdgeInsets.all(16),
                hintText: 'Enter Your Full Name.',
                hintStyle: const TextStyle(fontSize: 14),
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(15),
                  gapPadding: 0,
                ),
              ),
            ),
            const SizedBox(height: 30),
            DropdownButtonFormField2<String>(
              isExpanded: true,
              decoration: InputDecoration(
                contentPadding:
                    const EdgeInsets.symmetric(vertical: 16, horizontal: 16),
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(15),
                  gapPadding: 0,
                ),
                // Add more decoration..
              ),
              hint: const Text(
                'Select Your Gender',
                style: TextStyle(fontSize: 14),
              ),
              items: genderItems
                  .map(
                    (item) => DropdownItem<String>(
                      value: item,
                      child: Text(
                        item,
                        style: const TextStyle(
                          fontSize: 14,
                        ),
                      ),
                    ),
                  )
                  .toList(),
              valueListenable: valueListenable,
              validator: (value) {
                if (value == null) {
                  return 'Please select gender.';
                }
                return null;
              },
              onChanged: (value) {
                valueListenable.value = value;
              },
              iconStyleData: const IconStyleData(
                icon: Icon(
                  Icons.arrow_drop_down,
                  color: Colors.black45,
                ),
              ),
              dropdownStyleData: DropdownStyleData(
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(15),
                ),
              ),
              menuItemStyleData: const MenuItemStyleData(
                useDecorationHorizontalPadding: true,
              ),
            ),
            const SizedBox(height: 30),
            TextButton(
              onPressed: () {
                if (_formKey.currentState!.validate()) {
                  // Do something.
                }
              },
              child: const Text('Submit Button'),
            ),
          ],
        ),
      ),
    ),
  );
}
```

--------------------------------

### Customized DropdownButton2

Source: https://pub.dev/documentation/dropdown_button2/latest/index.html

An advanced example of DropdownButton2 with extensive styling for the button, icon, dropdown, and menu items. Suitable for applications requiring a unique UI.

```dart
final List<String> items = [
  'Item1',
  'Item2',
  'Item3',
  'Item4',
  'Item5',
  'Item6',
  'Item7',
  'Item8',
];
final valueListenable = ValueNotifier<String?>(null);

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      child: DropdownButtonHideUnderline(
        child: DropdownButton2<String>(
          isExpanded: true,
          hint: const Row(
            children: [
              Icon(
                Icons.list,
                size: 16,
                color: Colors.yellow,
              ),
              SizedBox(
                width: 4,
              ),
              Expanded(
                child: Text(
                  'Select Item',
                  style: TextStyle(
                    fontSize: 14,
                    fontWeight: FontWeight.bold,
                    color: Colors.yellow,
                  ),
                  overflow: TextOverflow.ellipsis,
                ),
              ),
            ],
          ),
          items: items
              .map(
                (String item) => DropdownItem<String>(
                  value: item,
                  height: 40,
                  child: Text(
                    item,
                    style: const TextStyle(
                      fontSize: 14,
                      fontWeight: FontWeight.bold,
                      color: Colors.white,
                    ),
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
              )
              .toList(),
          valueListenable: valueListenable,
          onChanged: (value) {
            valueListenable.value = value;
          },
          buttonStyleData: ButtonStyleData(
            height: 50,
            width: 160,
            padding: const EdgeInsets.only(left: 14, right: 14),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(14),
              border: Border.all(
                color: Colors.black26,
              ),
              color: Colors.redAccent,
            ),
            elevation: 2,
          ),
          iconStyleData: const IconStyleData(
            icon: Icon(
              Icons.arrow_forward_ios_outlined,
            ),
            iconSize: 14,
            iconEnabledColor: Colors.yellow,
            iconDisabledColor: Colors.grey,
          ),
          dropdownStyleData: DropdownStyleData(
            maxHeight: 200,
            width: 200,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(14),
              color: Colors.redAccent,
            ),
            offset: const Offset(-20, 0),
            scrollbarTheme: ScrollbarThemeData(
              radius: const Radius.circular(40),
              thickness: WidgetStateProperty.all(6),
              thumbVisibility: WidgetStateProperty.all(true),
            ),
          ),
          menuItemStyleData: const MenuItemStyleData(
            padding: EdgeInsets.only(left: 14, right: 14),
          ),
        ),
      ),
    ),
  );
}
```

--------------------------------

### DropdownButton2 with Image as Custom Button and Long Press Open

Source: https://pub.dev/documentation/dropdown_button2/latest/index.html

Utilize the `customButton` parameter with a `Container` displaying an image and set `openWithLongPress` to `true` to allow opening the dropdown menu via a long press. This example uses an `AssetImage` for the button's background.

```dart
class PopupImageExample extends StatefulWidget {
  const PopupImageExample({super.key});

  @override
  State<PopupImageExample> createState() => _PopupImageExampleState();
}

class _PopupImageExampleState extends State<PopupImageExample> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: DropdownButtonHideUnderline(
          child: DropdownButton2(
            customButton: Container(
              height: 240,
              width: 240,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(40),
                image: const DecorationImage(
                  image: AssetImage(
                    'assets/images/city.jpg',
                  ),
                  fit: BoxFit.cover,
                ),
              ),
            ),
            openWithLongPress: true,
            items: [
              ..._MenuItems.firstItems.map(
                (item) => DropdownItem<_MenuItem>(
                  value: item,
                  height: 48,
                  child: _MenuItems.buildItem(item),
                ),
              ),
              const DropdownItem<Divider>(
                enabled: false,
                height: 8,
                child: Divider(),
              ),
              ..._MenuItems.secondItems.map(
                (item) => DropdownItem<_MenuItem>(
                  value: item,
                  height: 48,
                  child: _MenuItems.buildItem(item),
                ),
              ),
            ],
            onChanged: (value) {

```

--------------------------------

### DropdownButton2 as Popup Menu Button

Source: https://pub.dev/documentation/dropdown_button2/latest/index.html

Configure DropdownButton2 to display a custom button and style the dropdown menu and its items. This setup is useful for creating custom context menus or selection lists.

```dart
DropdownButton2<
 _MenuItem>(
 onChanged: (value) {
 _MenuItems.onChanged(context, value! as _MenuItem);
 },
 buttonStyleData: ButtonStyleData(
 // This is necessary for the ink response to match our customButton radius.
 decoration: BoxDecoration(
 borderRadius: BorderRadius.circular(40),
 ),
 ),
 dropdownStyleData: DropdownStyleData(
 width: 160,
 padding: const EdgeInsets.symmetric(vertical: 6),
 decoration: BoxDecoration(
 borderRadius: BorderRadius.circular(4),
 color: Colors.redAccent,
 ),
 offset: const Offset(40, -4),
 ),
 menuItemStyleData: const MenuItemStyleData(
 padding: EdgeInsets.only(left: 16, right: 16),
 ),
 ),
```

--------------------------------

### toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug})

Source: https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/DropdownButton2-class.html

Returns a one-line detailed description of the object. Provides a concise summary of the widget.

```APIDOC
## toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug})

### Description
Returns a one-line detailed description of the object.

### Signature
`toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String`

### Inherited From
`Widget.toStringShallow`
```

--------------------------------

### copyWith Method

Source: https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/IconStyleData/copyWith.html

Creates a clone of the current IconStyleData but with the provided parameters overridden.

```APIDOC
## copyWith Method

### Description
Creates a clone of the current IconStyleData but with the provided parameters overridden.

### Method Signature
IconStyleData copyWith({
  Widget? icon,
  Color? iconDisabledColor,
  Color? iconEnabledColor,
  double? iconSize,
  Widget? openMenuIcon,
})

### Parameters
- **icon** (Widget?) - Optional - The new icon widget.
- **iconDisabledColor** (Color?) - Optional - The new disabled icon color.
- **iconEnabledColor** (Color?) - Optional - The new enabled icon color.
- **iconSize** (double?) - Optional - The new icon size.
- **openMenuIcon** (Widget?) - Optional - The new open menu icon widget.

### Implementation
```dart
IconStyleData copyWith({
  Widget? icon,
  Color? iconDisabledColor,
  Color? iconEnabledColor,
  double? iconSize,
  Widget? openMenuIcon,
}) {
  return IconStyleData(
    icon: icon ?? this.icon,
    iconDisabledColor: iconDisabledColor ?? this.iconDisabledColor,
    iconEnabledColor: iconEnabledColor ?? this.iconEnabledColor,
    iconSize: iconSize ?? this.iconSize,
    openMenuIcon: openMenuIcon ?? this.openMenuIcon,
  );
}
```
```

--------------------------------

### DropdownItem Methods

Source: https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/DropdownItem-class.html

Methods available for DropdownItem instances.

```APIDOC
## DropdownItem Methods

### Methods
- **copyWith** ({Widget? child, double? height, bool? intrinsicHeight, void onTap()?, T? value, bool? enabled, AlignmentGeometry? alignment, bool? closeOnTap}) → DropdownItem<T>
  Creates a copy of this DropdownItem but with the given fields replaced with the new values.
```

--------------------------------

### createElement()

Source: https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/DropdownButton2-class.html

Creates a StatefulElement to manage this widget's location in the tree. This is a fundamental method for widget lifecycle management.

```APIDOC
## createElement()

### Description
Creates a StatefulElement to manage this widget's location in the tree.

### Signature
`createElement() → StatefulElement`

### Inherited From
`Widget.createElement`
```

--------------------------------

### IconStyleData Constructor

Source: https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/IconStyleData/IconStyleData.html

Creates an IconStyleData object to configure the icon's appearance. This constructor allows setting the default icon, disabled and enabled colors, icon size, and the icon to display when the menu is open.

```APIDOC
## IconStyleData constructor

### Description
Creates an IconStyleData. It's a class to configure the theme of the button's icon.

### Parameters
- **icon** (Widget) - Optional - The default icon to display. Defaults to `Icons.arrow_drop_down`.
- **iconDisabledColor** (Color?) - Optional - The color of the icon when the button is disabled.
- **iconEnabledColor** (Color?) - Optional - The color of the icon when the button is enabled.
- **iconSize** (double) - Optional - The size of the icon. Defaults to 24.
- **openMenuIcon** (Widget?) - Optional - The icon to display when the menu is open.

### Implementation
```dart
const IconStyleData({
  this.icon = const Icon(Icons.arrow_drop_down),
  this.iconDisabledColor,
  this.iconEnabledColor,
  this.iconSize = 24,
  this.openMenuIcon,
});
```
```

--------------------------------

### DropdownSearchData Constructor

Source: https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/DropdownSearchData-class.html

Creates an instance of DropdownSearchData to configure searchable dropdowns.

```APIDOC
## DropdownSearchData Constructor

### Description
Creates a DropdownSearchData instance with optional parameters to customize the searchable dropdown behavior.

### Parameters
- **searchController** (TextEditingController?) - Optional - The TextEditingController for the search input.
- **searchBarWidget** (Widget?) - Optional - A custom widget to display as the search bar.
- **searchBarWidgetHeight** (double?) - Optional - The height of the custom search bar widget.
- **noResultsWidget** (Widget?) - Optional - The widget to display when no search results are found.
- **searchMatchFn** (SearchMatchFn<T>?) - Optional - A function to define how search queries match dropdown items.
```

--------------------------------

### MenuItemStyleData Constructor

Source: https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/MenuItemStyleData/MenuItemStyleData.html

Creates a MenuItemStyleData object to define the styling for menu items.

```APIDOC
## MenuItemStyleData constructor

### Description
Creates a MenuItemStyleData.

### Parameters
- **padding** (EdgeInsetsGeometry?) - Optional - Padding for the menu item.
- **useDecorationHorizontalPadding** (bool) - Optional - Defaults to false. Whether to use horizontal padding from decoration.
- **borderRadius** (BorderRadius?) - Optional - Border radius for the menu item.
- **overlayColor** (WidgetStateProperty<Color?>?) - Optional - The color of the overlay when the menu item is in a specific state.
- **mouseCursor** (MouseCursor?) - Optional - The cursor for the menu item.
- **selectedMenuItemBuilder** (SelectedMenuItemBuilder?) - Optional - A builder function to create a custom widget for selected menu items.
```

--------------------------------

### DropdownSearchData Constructor Implementation

Source: https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/DropdownSearchData/DropdownSearchData.html

This is the implementation of the DropdownSearchData constructor. It initializes the class properties and includes an assertion to ensure that searchBarWidgetHeight is not null when searchBarWidget is provided.

```dart
const DropdownSearchData({
  this.searchController,
  this.searchBarWidget,
  this.searchBarWidgetHeight,
  this.noResultsWidget,
  this.searchMatchFn,
}) : assert(
       (searchBarWidget == null) == (searchBarWidgetHeight == null),
       'searchBarWidgetHeight should not be null when using searchBarWidget\n'
       'This is necessary to properly determine menu limits and scroll offset',
     );
```

--------------------------------

### ButtonStyleData Constructors

Source: https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/ButtonStyleData-class.html

Creates a ButtonStyleData object to configure the theme of the button.

```APIDOC
## ButtonStyleData

A class to configure the theme of the button.

### Constructors

ButtonStyleData({double? height, double? width, EdgeInsetsGeometry? padding, BoxDecoration? decoration, BoxDecoration? foregroundDecoration, int? elevation, WidgetStateProperty<Color?>? overlayColor})
     Creates a ButtonStyleData. It's a class to configure the theme of the button.
const
```

--------------------------------

### DropdownItem build method implementation

Source: https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/DropdownItem/build.html

This method builds the UI for the DropdownItem, wrapping the child in Semantics and SizedBox for layout and accessibility.

```dart
@override
Widget build(BuildContext context) {
  return Semantics(
    button: true,
    child: SizedBox(
      height: intrinsicHeight ? null : height,
      child: Align(alignment: alignment, child: child),
    ),
  );
}
```

--------------------------------

### DropdownItem Constructor

Source: https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/DropdownItem-class.html

Creates a dropdown item with various customizable properties.

```APIDOC
## DropdownItem Constructor

### Description
Creates a dropdown item.

### Parameters
- **child** (Widget) - Required - The widget to display as the item's content.
- **height** (double) - Optional - The height of the menu item. Defaults to `_kMenuItemHeight`.
- **intrinsicHeight** (bool) - Optional - If true, the item's height will be determined by its intrinsic height. Defaults to false.
- **alignment** (AlignmentGeometry) - Optional - Defines how the item is positioned within its container. Defaults to `AlignmentDirectional.centerStart`.
- **onTap** (VoidCallback?) - Optional - A callback function that is executed when the item is tapped.
- **value** (T?) - Optional - The value associated with this item, which is returned when the item is selected.
- **enabled** (bool) - Optional - Determines if the item is selectable by the user. Defaults to true.
- **closeOnTap** (bool) - Optional - Specifies whether the dropdown should close after this item is tapped. Defaults to true.
- **key** (Key?) - Optional - A key that uniquely identifies this widget.
```

--------------------------------

### copyWith Method

Source: https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/MenuItemStyleData/copyWith.html

Creates a clone of the current MenuItemStyleData but with the provided parameters overridden.

```APIDOC
## copyWith Method

### Description
Creates a clone of the current MenuItemStyleData but with the provided parameters overridden.

### Method Signature
MenuItemStyleData copyWith({
  EdgeInsetsGeometry? padding,
  BorderRadius? borderRadius,
  WidgetStateProperty<Color?>? overlayColor,
  MouseCursor? mouseCursor,
  SelectedMenuItemBuilder? selectedMenuItemBuilder,
})

### Parameters
- **padding** (EdgeInsetsGeometry?) - Optional - The padding for the menu item.
- **borderRadius** (BorderRadius?) - Optional - The border radius for the menu item.
- **overlayColor** (WidgetStateProperty<Color?>?) - Optional - The overlay color for the menu item.
- **mouseCursor** (MouseCursor?) - Optional - The mouse cursor for the menu item.
- **selectedMenuItemBuilder** (SelectedMenuItemBuilder?) - Optional - A builder for the selected menu item.

### Implementation Details
This method returns a new MenuItemStyleData object with the specified properties updated. If a property is not provided, the original value is retained.
```

--------------------------------

### Simple DropdownButton2

Source: https://pub.dev/documentation/dropdown_button2/latest/index.html

A basic implementation of DropdownButton2 with default styling. Use this for simple selection lists.

```dart
final List<String> items = [
  'Item1',
  'Item2',
  'Item3',
  'Item4',
];
final valueListenable = ValueNotifier<String?>(null);

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      child: DropdownButtonHideUnderline(
        child: DropdownButton2<String>(
          isExpanded: true,
          hint: Text(
            'Select Item',
            style: TextStyle(
              fontSize: 14,
              color: Theme.of(context).hintColor,
            ),
          ),
          items: items
              .map(
                (String item) => DropdownItem<String>(
                  value: item,
                  height: 40,
                  child: Text(
                    item,
                    style: const TextStyle(
                      fontSize: 14,
                    ),
                  ),
                ),
              )
              .toList(),
          valueListenable: valueListenable,
          onChanged: (String? value) {
            valueListenable.value = value;
          },
          buttonStyleData: const ButtonStyleData(
            padding: EdgeInsets.symmetric(horizontal: 16),
            height: 40,
            width: 140,
          ),
        ),
      ),
    ),
  );
}
```

--------------------------------

### DropdownButtonFormField2 Implementation Parameters

Source: https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/DropdownButtonFormField2/DropdownButtonFormField2.html

This snippet shows the parameters used in the implementation of DropdownButtonFormField2. It includes options for focus, autofocus, feedback, mouse cursor, alignment, and various styling data for buttons, icons, menus, and items.

```dart
focusNode: focusNode,
autofocus: autofocus,
enableFeedback: enableFeedback,
mouseCursor: mouseCursor,
alignment: alignment,
buttonStyleData: buttonStyleData?._toButtonStyleData,
iconStyleData: iconStyleData,
dropdownStyleData: dropdownStyleData,
menuItemStyleData: menuItemStyleData,
dropdownSearchData: dropdownSearchData,
dropdownSeparator: dropdownSeparator,
customButton: customButton,
openWithLongPress: openWithLongPress,
barrierDismissible: barrierDismissible,
barrierCoversButton: barrierCoversButton,
barrierBlocksInteraction: barrierBlocksInteraction,
barrierColor: barrierColor,
barrierLabel: barrierLabel,
openDropdownListenable: openDropdownListenable,
inputDecoration: effectiveDecoration,
isEmpty: isEmpty,
hasError: hasError,
```

--------------------------------

### DropdownSearchData Constructor

Source: https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/DropdownSearchData/DropdownSearchData.html

The constructor for DropdownSearchData allows for the initialization of various optional parameters to customize the search behavior and appearance of the dropdown.

```APIDOC
## const DropdownSearchData<T>({Widget? searchBarWidget, double? searchBarWidgetHeight, Widget? noResultsWidget, SearchMatchFn<T>? searchMatchFn, TextEditingController? searchController})

### Description
Creates a DropdownSearchData instance with customizable search and UI elements.

### Parameters
#### Constructor Parameters
- **searchController** (TextEditingController?) - Optional - Controller for the search input field.
- **searchBarWidget** (Widget?) - Optional - A custom widget to use as the search bar.
- **searchBarWidgetHeight** (double?) - Optional - The height of the custom search bar widget. Should be provided if `searchBarWidget` is provided.
- **noResultsWidget** (Widget?) - Optional - A widget to display when no search results are found.
- **searchMatchFn** (SearchMatchFn<T>?) - Optional - A function to determine how search items are matched against the query.

### Implementation Notes
An assertion ensures that `searchBarWidgetHeight` is provided if `searchBarWidget` is used, which is necessary for correct menu sizing and scrolling.
```

--------------------------------

### MenuItemStyleData Constructor

Source: https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/MenuItemStyleData/MenuItemStyleData.html

Use this constructor to create a MenuItemStyleData object. It allows customization of padding, horizontal padding usage, border radius, overlay color, mouse cursor, and a custom builder for selected menu items.

```dart
const MenuItemStyleData({
  this.padding,
  this.useDecorationHorizontalPadding = false,
  this.borderRadius,
  this.overlayColor,
  this.mouseCursor,
  this.selectedMenuItemBuilder,
});
```

--------------------------------

### MenuItems Utility Class

Source: https://pub.dev/documentation/dropdown_button2/latest/index.html

Provides static lists of menu items, individual menu item definitions, a builder for menu item widgets, and a handler for item selection.

```dart
class _MenuItems {
  static const List<_MenuItem> firstItems = [like, share, download];
  static const List<_MenuItem> secondItems = [cancel];

  static const like = _MenuItem(text: 'Like', icon: Icons.favorite);
  static const share = _MenuItem(text: 'Share', icon: Icons.share);
  static const download = _MenuItem(text: 'Download', icon: Icons.download);
  static const cancel = _MenuItem(text: 'Cancel', icon: Icons.cancel);

  static Widget buildItem(_MenuItem item) {
    return Row(
      children: [
        Icon(
          item.icon,
          color: Colors.white,
          size: 22,
        ),
        const SizedBox(
          width: 10,
        ),
        Expanded(
          child: Text(
            item.text,
            style: const TextStyle(
              color: Colors.white,
            ),
          ),
        ),
      ],
    );
  }

  static void onChanged(BuildContext context, _MenuItem item) {
    switch (item) {
      case _MenuItems.like:
        //Do something
        break;
      case _MenuItems.share:
        //Do something
        break;
      case _MenuItems.download:
        //Do something
        break;
      case _MenuItems.cancel:
        //Do something
        break;
    }
  }
}
```

--------------------------------

### toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug, int wrapWidth = 65})

Source: https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/DropdownButton2-class.html

Returns a string representation of this node and its descendants. Useful for deep inspection of the widget tree.

```APIDOC
## toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug, int wrapWidth = 65})

### Description
Returns a string representation of this node and its descendants.

### Signature
`toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug, int wrapWidth = 65}) → String`

### Inherited From
`Widget.toStringDeep`
```

--------------------------------

### Add Dependency to pubspec.yaml

Source: https://pub.dev/documentation/dropdown_button2/latest/index.html

To use the dropdown_button2 package, add the specified line to your pubspec.yaml file under dependencies.

```yaml
dependencies:
  dropdown_button2: ^3.1.0

```

--------------------------------

### enabled property

Source: https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/DropdownItem/enabled.html

Controls whether a user can select this menu item. Defaults to `true`.

```APIDOC
## enabled property

### Description

Whether or not a user can select this menu item.

### Type

bool

### Default Value

`true`

### Implementation

```dart
final bool enabled;
```
```

--------------------------------

### ButtonStyleData Methods

Source: https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/ButtonStyleData-class.html

Methods available for the ButtonStyleData class.

```APIDOC
## Methods

copyWith({double? height, double? width, EdgeInsetsGeometry? padding, BoxDecoration? decoration, BoxDecoration? foregroundDecoration, int? elevation, WidgetStateProperty<Color?>? overlayColor}) → ButtonStyleData
     Create a clone of the current ButtonStyleData but with the provided parameters overridden.

noSuchMethod(Invocation invocation) → dynamic
     Invoked when a nonexistent method or property is accessed.
inherited

tostring() → String
     A string representation of this object.
inherited
```

--------------------------------

### ButtonStyleData Properties

Source: https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/ButtonStyleData-class.html

Properties available for configuring the ButtonStyleData.

```APIDOC
## Properties

decoration → BoxDecoration?
     The decoration of the Button
finalinherited

elevation → int?
     The elevation of the Button
finalinherited

foregroundDecoration → BoxDecoration?
     The decoration to paint in front of the Button
finalinherited

hashCode → int
     The hash code for this object.
no setterinherited

height → double?
     The height of the button
finalinherited

overlayColor → WidgetStateProperty<Color?>?
     Defines the ink response focus, hover, and splash colors.
final

padding → EdgeInsetsGeometry?
     The inner padding of the Button
finalinherited

runtimeType → Type
     A representation of the runtime type of the object.
no setterinherited

width → double?
     The width of the button
finalinherited
```

--------------------------------

### IconStyleData Constructor Implementation

Source: https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/IconStyleData/IconStyleData.html

This is the implementation of the IconStyleData constructor. It initializes properties for the button's icon, such as the icon widget itself, disabled and enabled colors, icon size, and an optional icon for the open menu state.

```dart
const IconStyleData({
  this.icon = const Icon(Icons.arrow_drop_down),
  this.iconDisabledColor,
  this.iconEnabledColor,
  this.iconSize = 24,
  this.openMenuIcon,
});
```

--------------------------------

### toStringShort()

Source: https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/DropdownButton2-class.html

A short, textual description of this widget. Provides a brief identifier for the widget.

```APIDOC
## toStringShort()

### Description
A short, textual description of this widget.

### Signature
`toStringShort() → String`

### Inherited From
`Widget.toStringShort`
```

--------------------------------

### ButtonStyleData Constructor

Source: https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/ButtonStyleData/ButtonStyleData.html

Creates a ButtonStyleData instance. Use this to configure the theme of a button. It accepts various visual properties like height, width, padding, decorations, elevation, and overlay color.

```dart
const ButtonStyleData({
  super.height,
  super.width,
  super.padding,
  super.decoration,
  super.foregroundDecoration,
  super.elevation,
  this.overlayColor,
});
```

--------------------------------

### copyWith Method

Source: https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/DropdownSearchData/copyWith.html

Creates a clone of the current DropdownSearchData but with the provided parameters overridden.

```APIDOC
## copyWith Method

### Description
Creates a clone of the current DropdownSearchData but with the provided parameters overridden.

### Method Signature
```dart
DropdownSearchData<T> copyWith({
  TextEditingController? searchController,
  Widget? searchBarWidget,
  double? searchBarWidgetHeight,
  Widget? noResultsWidget,
  SearchMatchFn<T>? searchMatchFn,
})
```

### Parameters
- **searchController** (TextEditingController?) - Optional - Controller for the search input.
- **searchBarWidget** (Widget?) - Optional - Custom widget for the search bar.
- **searchBarWidgetHeight** (double?) - Optional - Height of the search bar widget.
- **noResultsWidget** (Widget?) - Optional - Widget to display when no search results are found.
- **searchMatchFn** (SearchMatchFn<T>?) - Optional - Function to determine search matching logic.
```

--------------------------------

### DropdownStyleData Constructor

Source: https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/DropdownStyleData/DropdownStyleData.html

Initializes a new instance of the DropdownStyleData class with customizable properties for dropdown styling.

```APIDOC
## DropdownStyleData Constructor

### Description
Creates a DropdownStyleData object to customize the appearance and behavior of a dropdown menu.

### Parameters
- **maxHeight** (double?) - Optional - The maximum height of the dropdown menu.
- **anchoredMinHeight** (double?) - Optional - The minimum height of the dropdown when anchored.
- **width** (double?) - Optional - The width of the dropdown menu.
- **padding** (EdgeInsetsGeometry?) - Optional - Padding around the dropdown content.
- **scrollPadding** (EdgeInsetsGeometry?) - Optional - Padding for the scrollable area of the dropdown.
- **decoration** (BoxDecoration?) - Optional - The decoration for the dropdown menu's container.
- **elevation** (int) - Optional - The elevation (shadow) of the dropdown menu. Defaults to 8.
- **direction** (DropdownDirection) - Optional - The direction of the dropdown. Defaults to DropdownDirection.textDirection.
- **offset** (Offset) - Optional - The offset of the dropdown menu from its anchor. Defaults to Offset.zero.
- **isOverButton** (bool) - Optional - Whether the dropdown should appear over the button. Defaults to false.
- **useSafeArea** (bool) - Optional - Whether to use SafeArea for the dropdown. Defaults to true.
- **isFullScreen** (bool?) - Deprecated - Use useRootNavigator instead.
- **useRootNavigator** (bool) - Optional - Whether to use the root navigator for the dropdown. Defaults to false.
- **scrollbarTheme** (ScrollbarThemeData?) - Optional - The theme for the scrollbar within the dropdown.
- **openInterval** (Interval) - Optional - The interval for the dropdown opening animation. Defaults to const Interval(0.25, 0.5).
- **dropdownBuilder** (DropdownBuilder?) - Optional - A builder function to customize the dropdown's appearance.
```

--------------------------------

### DropdownItem Constructor

Source: https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/DropdownItem/DropdownItem.html

Creates a dropdown item with customizable properties. The `child` property is required.

```APIDOC
## DropdownItem<T> constructor

### Description
Creates a dropdown item.

The `child` property must be set.

### Parameters
- **child** (Widget) - Required - The widget to display within the dropdown item.
- **height** (double) - Optional - Defaults to `_kMenuItemHeight`. The height of the dropdown item.
- **intrinsicHeight** (bool) - Optional - Defaults to `false`. Whether the item's height should be determined intrinsically by its child.
- **alignment** (AlignmentGeometry) - Optional - Defaults to `AlignmentDirectional.centerStart`. The alignment of the child within the item.
- **onTap** (VoidCallback?) - Optional - A callback function to be executed when the item is tapped.
- **value** (T?) - Optional - The value associated with the dropdown item.
- **enabled** (bool) - Optional - Defaults to `true`. Whether the dropdown item is enabled.
- **closeOnTap** (bool) - Optional - Defaults to `true`. Whether the dropdown menu should close when the item is tapped.
- **key** (Key?) - Optional - A key for the widget.

### Implementation
```dart
const DropdownItem({
  required super.child,
  super.height,
  super.intrinsicHeight,
  super.alignment,
  this.onTap,
  this.value,
  this.enabled = true,
  this.closeOnTap = true,
  super.key,
});
```
```

--------------------------------

### isFullScreen Property

Source: https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/DropdownStyleData/isFullScreen.html

Controls if the dropdown menu opens in fullscreen mode, above the AppBar & TabBar. This property is deprecated and `useRootNavigator` should be used instead.

```APIDOC
## isFullScreen Property

### Description
Opens the dropdown menu in fullscreen mode (Above AppBar & TabBar).

### Deprecation
Deprecated in favor of `useRootNavigator`.

### Type
`bool?`

### Final
`final`

### Implementation
```dart
@Deprecated('Use useRootNavigator instead.')
final bool? isFullScreen;
```
```

--------------------------------

### DropdownButton2 Properties

Source: https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/DropdownButton2-class.html

This section lists and describes the properties that can be used to configure the DropdownButton2 widget.

```APIDOC
## Properties

### alignment
- **Type**: `AlignmentGeometry`
- **Description**: Defines how the hint or the selected item is positioned within the button.
- **`final`**: true

### autofocus
- **Type**: `bool`
- **Description**: True if this widget will be selected as the initial focus when no other node in its scope is currently focused.
- **`final`**: true

### barrierBlocksInteraction
- **Type**: `bool`
- **Description**: Whether to block interaction with underlying widgets when the dropdown menu is open.
- **`final`**: true

### barrierColor
- **Type**: `Color?`
- **Description**: The color to use for the modal barrier. If this is null, the barrier will be transparent.
- **`final`**: true

### barrierCoversButton
- **Type**: `bool`
- **Description**: Specifies whether the modal barrier should cover the dropdown button or not.
- **`final`**: true

### barrierDismissible
- **Type**: `bool`
- **Description**: Whether you can dismiss this route by tapping the modal barrier.
- **`final`**: true

### barrierLabel
- **Type**: `String?`
- **Description**: The semantic label used for a dismissible barrier.
- **`final`**: true

### buttonStyleData
- **Type**: `ButtonStyleData?`
- **Description**: Used to configure the theme of the button.
- **`final`**: true

### customButton
- **Type**: `Widget?`
- **Description**: Uses custom widget like icon, image, etc., instead of the default button.
- **`final`**: true

### disabledHint
- **Type**: `Widget?`
- **Description**: A preferred placeholder widget that is displayed when the dropdown is disabled.
- **`final`**: true

### dropdownSearchData
- **Type**: `DropdownSearchData<T>?`
- **Description**: Used to configure searchable dropdowns.
- **`final`**: true

### dropdownSeparator
- **Type**: `DropdownSeparator<T>?`
- **Description**: Adds a separator widget to the dropdown menu.
- **`final`**: true

### dropdownStyleData
- **Type**: `DropdownStyleData`
- **Description**: Used to configure the theme of the dropdown menu.
- **`final`**: true

### enableFeedback
- **Type**: `bool?`
- **Description**: Whether detected gestures should provide acoustic and/or haptic feedback.
- **`final`**: true

### focusNode
- **Type**: `FocusNode?`
- **Description**: An optional focus node to use as the focus node for this widget.
- **`final`**: true

### hashCode
- **Type**: `int`
- **Description**: The hash code for this object.
- **`no setter`**: inherited

### hint
- **Type**: `Widget?`
- **Description**: A placeholder widget that is displayed by the dropdown button.
- **`final`**: true

### iconStyleData
- **Type**: `IconStyleData`
- **Description**: Used to configure the theme of the button's icon.
- **`final`**: true

### isDense
- **Type**: `bool`
- **Description**: Reduce the button's height.
- **`final`**: true

### isExpanded
- **Type**: `bool`
- **Description**: Set the dropdown's inner contents to horizontally fill its parent.
- **`final`**: true

### items
- **Type**: `List<DropdownItem<T>>?`
- **Description**: The list of items the user can select.
- **`final`**: true

### key
- **Type**: `Key?`
- **Description**: Controls how one widget replaces another widget in the tree.
- **`final`**: true
- **`inherited`**: true

### menuItemStyleData
- **Type**: `MenuItemStyleData`
- **Description**: Used to configure the theme of the dropdown menu items.
- **`final`**: true

### mouseCursor
- **Type**: `MouseCursor?`
- **Description**: The cursor for a mouse pointer when it enters or is hovering over this button.
- **`final`**: true

### multiValueListenable
- **Type**: `ValueListenable<Iterable<T>>?`
- **Description**: A ValueListenable that represents a list of the currently selected DropdownItems. It holds a list of type `List<T>`, where `T` represents the type of DropdownItem's value.
- **`final`**: true

### onChanged
- **Type**: `ValueChanged<T?>?`
- **Description**: Called when the user selects an item.
- **`final`**: true

### onMenuStateChange
- **Type**: `OnMenuStateChangeFn?`
- **Description**: Called when the dropdown menu opens or closes.
- **`final`**: true

### openDropdownListenable
- **Type**: `Listenable?`
- **Description**: A Listenable that can be used to programmatically open the dropdown menu.
- **`final`**: true

### openWithLongPress
- **Type**: `bool`
- **Description**: Opens the dropdown menu on long-pressing instead of tapping.
- **`final`**: true

### runtimeType
- **Type**: `Type`
- **Description**: A representation of the runtime type of the object.
- **`no setter`**: inherited

### selectedItemBuilder
- **Type**: `DropdownButton2Builder?`
- **Description**: A builder to customize the dropdown buttons corresponding to the DropdownItems in items.
- **`final`**: true

### style
- **Type**: `TextStyle?`
- **Description**: The text style to use for text in the dropdown button and the dropdown menu that appears when you tap the button.
- **`final`**: true

### underline
- **Type**: `Widget?`
- **Description**: The widget to use for drawing the drop-down button's underline.
- **`final`**: true

### valueListenable
- **Type**: `ValueListenable<T?>?`
- **Description**: A ValueListenable that represents the value of the currently selected DropdownItem. It holds a value of type `T?`, where `T` represents the type of DropdownItem's value.
- **`final`**: true
```

--------------------------------

### IconStyleData Constructor

Source: https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/IconStyleData-class.html

Creates an IconStyleData object to configure the theme of the button's icon. You can customize the default icon, disabled and enabled colors, icon size, and the icon displayed when the menu is open.

```APIDOC
## IconStyleData

### Description
A class to configure the theme of the button's icon.

### Parameters
- **icon** (Widget) - Optional - The widget to use for the drop-down button's suffix icon. Defaults to `Icon(Icons.arrow_drop_down)`.
- **iconDisabledColor** (Color?) - Optional - The color of any Icon descendant of icon if this button is disabled, i.e. if `onChanged` is null.
- **iconEnabledColor** (Color?) - Optional - The color of any Icon descendant of icon if this button is enabled, i.e. if `onChanged` is defined.
- **iconSize** (double) - Optional - The size to use for the drop-down button's icon. Defaults to 24.0.
- **openMenuIcon** (Widget?) - Optional - Shows a different icon when the dropdown menu is open.
```

--------------------------------

### IconStyleData.copyWith Method

Source: https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/IconStyleData-class.html

Create a new IconStyleData object with specific properties overridden, allowing for easy theme modifications without altering the original object.

```APIDOC
## copyWith

### Description
Create a clone of the current IconStyleData but with the provided parameters overridden.

### Parameters
- **icon** (Widget?) - Optional - The widget to use for the drop-down button's suffix icon.
- **iconDisabledColor** (Color?) - Optional - The color of any Icon descendant of icon if this button is disabled.
- **iconEnabledColor** (Color?) - Optional - The color of any Icon descendant of icon if this button is enabled.
- **iconSize** (double?) - Optional - The size to use for the drop-down button's icon.
- **openMenuIcon** (Widget?) - Optional - Shows different icon when dropdown menu is open.

### Returns
- IconStyleData - A new IconStyleData instance with the specified properties updated.
```

--------------------------------

### DropdownButton2 Constructor

Source: https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/DropdownButton2-class.html

Creates a DropdownButton2 widget. This constructor allows for extensive customization of the dropdown button's appearance and behavior.

```APIDOC
## DropdownButton2<T>

### Description
A Material Design button for selecting from a list of items. It displays the currently selected item and an arrow to open a menu for selecting another item.

### Parameters
- **key** (Key?): An optional key for the widget.
- **items** (List<DropdownItem<T>>?): A list of DropdownItem widgets representing the selectable items.
- **selectedItemBuilder** (DropdownButton2Builder?): A builder function to customize the appearance of the selected item.
- **valueListenable** (ValueListenable<T?>?): A ValueListenable for the currently selected value.
- **multiValueListenable** (ValueListenable<Iterable<T>>?): A ValueListenable for multiple selected values.
- **hint** (Widget?): A widget to display when no item is selected.
- **disabledHint** (Widget?): A widget to display when the dropdown is disabled.
- **onChanged** (ValueChanged<T?>?): A callback function that is called when the selected item changes.
- **onMenuStateChange** (OnMenuStateChangeFn?): A callback function for menu state changes.
- **style** (TextStyle?): The text style for the dropdown.
- **underline** (Widget?): A widget to display as the underline.
- **isDense** (bool): Whether the dropdown is dense.
- **isExpanded** (bool): Whether the dropdown is expanded.
- **focusNode** (FocusNode?): A focus node for the dropdown.
- **autofocus** (bool): Whether the dropdown should autofocus.
- **enableFeedback** (bool?): Whether to enable feedback on tap.
- **mouseCursor** (MouseCursor?): The mouse cursor to display.
- **alignment** (AlignmentGeometry): The alignment of the dropdown button.
- **buttonStyleData** (ButtonStyleData?): Data for styling the button.
- **iconStyleData** (IconStyleData): Data for styling the icon.
- **dropdownStyleData** (DropdownStyleData): Data for styling the dropdown menu.
- **menuItemStyleData** (MenuItemStyleData): Data for styling the menu items.
- **dropdownSearchData** (DropdownSearchData<T>?): Data for dropdown search functionality.
- **dropdownSeparator** (DropdownSeparator<T>?): A separator widget for the dropdown.
- **customButton** (Widget?): A custom button widget.
- **openWithLongPress** (bool): Whether to open the dropdown with a long press.
- **barrierDismissible** (bool): Whether the dropdown barrier is dismissible.
- **barrierCoversButton** (bool): Whether the barrier covers the button.
- **barrierBlocksInteraction** (bool): Whether the barrier blocks interaction.
- **barrierColor** (Color?): The color of the barrier.
- **barrierLabel** (String?): The label for the barrier.
- **openDropdownListenable** (Listenable?): A listenable for opening the dropdown.

### Example
```dart
DropdownButton2<String>(
  items: [
    DropdownItem<String>(value: 'Item 1', label: 'Item 1'),
    DropdownItem<String>(value: 'Item 2', label: 'Item 2'),
  ],
  value: 'Item 1',
  onChanged: (value) {
    // Handle value change
  },
)
```
```
Tokens:
Raw