### 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 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 items = [ 'A_Item1', 'A_Item2', 'A_Item3', 'A_Item4', 'B_Item1', 'B_Item2', 'B_Item3', 'B_Item4', ]; final valueListenable = ValueNotifier(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( 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 genderItems = [ 'Male', 'Female', ]; final valueListenable = ValueNotifier(null); final _formKey = GlobalKey(); @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( 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( 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 items = [ 'Item1', 'Item2', 'Item3', 'Item4', 'Item5', 'Item6', 'Item7', 'Item8', ]; final valueListenable = ValueNotifier(null); @override Widget build(BuildContext context) { return Scaffold( body: Center( child: DropdownButtonHideUnderline( child: DropdownButton2( 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( 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 createState() => _PopupImageExampleState(); } class _PopupImageExampleState extends State { @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( 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 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?) - 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?) - 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? 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? 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?) - 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 items = [ 'Item1', 'Item2', 'Item3', 'Item4', ]; final valueListenable = ValueNotifier(null); @override Widget build(BuildContext context) { return Scaffold( body: Center( child: DropdownButtonHideUnderline( child: DropdownButton2( isExpanded: true, hint: Text( 'Select Item', style: TextStyle( fontSize: 14, color: Theme.of(context).hintColor, ), ), items: items .map( (String item) => DropdownItem( 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({Widget? searchBarWidget, double? searchBarWidgetHeight, Widget? noResultsWidget, SearchMatchFn? 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?) - 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? 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? 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 copyWith({ TextEditingController? searchController, Widget? searchBarWidget, double? searchBarWidgetHeight, Widget? noResultsWidget, SearchMatchFn? 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?) - 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 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?` - **Description**: Used to configure searchable dropdowns. - **`final`**: true ### dropdownSeparator - **Type**: `DropdownSeparator?` - **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>?` - **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>?` - **Description**: A ValueListenable that represents a list of the currently selected DropdownItems. It holds a list of type `List`, where `T` represents the type of DropdownItem's value. - **`final`**: true ### onChanged - **Type**: `ValueChanged?` - **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?` - **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 ### 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>?): A list of DropdownItem widgets representing the selectable items. - **selectedItemBuilder** (DropdownButton2Builder?): A builder function to customize the appearance of the selected item. - **valueListenable** (ValueListenable?): A ValueListenable for the currently selected value. - **multiValueListenable** (ValueListenable>?): 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?): 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?): Data for dropdown search functionality. - **dropdownSeparator** (DropdownSeparator?): 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( items: [ DropdownItem(value: 'Item 1', label: 'Item 1'), DropdownItem(value: 'Item 2', label: 'Item 2'), ], value: 'Item 1', onChanged: (value) { // Handle value change }, ) ``` ```