Merge pull request #440 from AhmedLSayed9/add_mouse_cursor_configuration

AhmedLSayed9 · web-flow · commit ebb1ea050744 · 2026-04-28T19:23:23.000+03:00
Add `mouseCursor` to the dropdown button and MenuItemStyleData to customize the mouse cursor when hovering
diff --git a/README.md b/README.md
@@ -79,6 +79,7 @@ customize to your needs.
 | [underline](https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/DropdownButton2/underline.html)                           | The widget to use for drawing the drop-down button's underline                           | Widget                     |    No    |
 | [isDense](https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/DropdownButton2/isDense.html)                               | Reduce the button's height                                                               | bool                       |    No    |
 | [isExpanded](https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/DropdownButton2/isExpanded.html)                         | Makes the button's inner contents expanded (set true to avoid long text overflowing)     | bool                       |    No    |
+| [mouseCursor](https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/DropdownButton2/mouseCursor.html)                       | The cursor for a mouse pointer when it enters or is hovering over the button             | MouseCursor                |    No    |
 | [alignment](https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/DropdownButton2/alignment.html)                           | Defines how the hint or the selected item is positioned within the button                | AlignmentGeometry          |    No    |
 | [buttonStyleData](https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/DropdownButton2/buttonStyleData.html)               | Used to configure the theme of the button                                                | ButtonStyleData            |    No    |
 | [iconStyleData](https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/DropdownButton2/iconStyleData.html)                   | Used to configure the theme of the button's icon                                         | IconStyleData              |    No    |
@@ -144,6 +145,7 @@ customize to your needs.
 | [useDecorationHorizontalPadding](https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/MenuItemStyleData/useDecorationHorizontalPadding.html) | Determine whether to use the horizontal padding from "decoration.contentPadding" for menu items when using `DropdownButtonFormField2` | bool                        |    No    |
 | [borderRadius](https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/MenuItemStyleData/borderRadius.html)                                     | The border radius of the menu item                                                                                                    | BorderRadius                |    No    |
 | [overlayColor](https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/MenuItemStyleData/overlayColor.html)                                     | Defines the ink response focus, hover, and splash colors for the items                                                                | WidgetStateProperty<Color?> |    No    |
+| [mouseCursor](https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/MenuItemStyleData/mouseCursor.html)                                       | The cursor for a mouse pointer when it enters or is hovering over a menu item                                                         | MouseCursor                 |    No    |
 | [selectedMenuItemBuilder](https://pub.dev/documentation/dropdown_button2/latest/dropdown_button2/MenuItemStyleData/selectedMenuItemBuilder.html)               | A builder to customize the selected menu item                                                                                         | SelectedMenuItemBuilder     |    No    |
 
 #### Subclass DropdownSearchData:
diff --git a/packages/dropdown_button2/CHANGELOG.md b/packages/dropdown_button2/CHANGELOG.md
@@ -9,6 +9,7 @@
 - Re-lay out dropdown menu on ancestor scroll.
 - Add `barrierBlocksInteraction` to allow interaction with underlying widgets while the dropdown menu is open.
 - Properly dispose internal FocusNode when replaced by an external FocusNode.
+- Add `mouseCursor` to the dropdown button and MenuItemStyleData to customize the mouse cursor when hovering, closes #416.
 
 ## 3.0.0
 
diff --git a/packages/dropdown_button2/lib/src/dropdown_button2.dart b/packages/dropdown_button2/lib/src/dropdown_button2.dart
@@ -114,6 +114,7 @@ class DropdownButton2<T> extends StatefulWidget {
     this.focusNode,
     this.autofocus = false,
     this.enableFeedback,
+    this.mouseCursor,
     this.alignment = AlignmentDirectional.centerStart,
     this.buttonStyleData,
     this.iconStyleData = const IconStyleData(),
@@ -155,6 +156,7 @@ class DropdownButton2<T> extends StatefulWidget {
     required this.focusNode,
     required this.autofocus,
     required this.enableFeedback,
+    required this.mouseCursor,
     required this.alignment,
     required this.buttonStyleData,
     required this.iconStyleData,
@@ -310,6 +312,16 @@ class DropdownButton2<T> extends StatefulWidget {
   ///  * [Feedback] for providing platform-specific feedback to certain actions.
   final bool? enableFeedback;
 
+  /// The cursor for a mouse pointer when it enters or is hovering over this
+  /// button.
+  ///
+  /// {@macro flutter.material.InkWell.mouseCursor}
+  ///
+  // TODO(Ahmed): Update to [WidgetStateMouseCursor.adaptiveClickable]
+  // when it's supported by the min version of the package [Flutter>=3.41.0]
+  /// If this property is null, [WidgetStateMouseCursor.clickable] will be used.
+  final MouseCursor? mouseCursor;
+
   /// Defines how the hint or the selected item is positioned within the button.
   ///
   /// Defaults to [AlignmentDirectional.centerStart].
@@ -982,8 +994,10 @@ class _DropdownButton2State<T> extends State<DropdownButton2<T>> with WidgetsBin
       );
     }
 
+    // TODO(Ahmed): Use [WidgetStateMouseCursor.adaptiveClickable]
+    // when it's supported by the min version of the package [Flutter>=3.41.0]
     final MouseCursor effectiveMouseCursor = WidgetStateProperty.resolveAs<MouseCursor>(
-      WidgetStateMouseCursor.clickable,
+      widget.mouseCursor ?? WidgetStateMouseCursor.clickable,
       <WidgetState>{
         if (!_enabled) WidgetState.disabled,
       },
@@ -1119,6 +1133,7 @@ class DropdownButtonFormField2<T> extends FormField<T> {
     super.forceErrorText,
     AutovalidateMode? autovalidateMode,
     bool? enableFeedback,
+    MouseCursor? mouseCursor,
     AlignmentGeometry alignment = AlignmentDirectional.centerStart,
     FormFieldButtonStyleData? buttonStyleData,
     IconStyleData iconStyleData = const IconStyleData(),
@@ -1211,6 +1226,7 @@ class DropdownButtonFormField2<T> extends FormField<T> {
                  focusNode: focusNode,
                  autofocus: autofocus,
                  enableFeedback: enableFeedback,
+                 mouseCursor: mouseCursor,
                  alignment: alignment,
                  buttonStyleData: buttonStyleData?._toButtonStyleData,
                  iconStyleData: iconStyleData,
diff --git a/packages/dropdown_button2/lib/src/dropdown_menu_item.dart b/packages/dropdown_button2/lib/src/dropdown_menu_item.dart
@@ -258,6 +258,7 @@ class _DropdownItemButtonState<T> extends State<_DropdownItemButton<T>> {
         enableFeedback: widget.enableFeedback,
         onTap: _handleOnTap,
         onFocusChange: _handleFocusChange,
+        mouseCursor: _menuItemStyle.mouseCursor,
         borderRadius: _menuItemStyle.borderRadius,
         overlayColor: _menuItemStyle.overlayColor,
         child: isSelectedItem
diff --git a/packages/dropdown_button2/lib/src/dropdown_style_data.dart b/packages/dropdown_button2/lib/src/dropdown_style_data.dart
@@ -170,6 +170,7 @@ class MenuItemStyleData {
     this.useDecorationHorizontalPadding = false,
     this.borderRadius,
     this.overlayColor,
+    this.mouseCursor,
     this.selectedMenuItemBuilder,
   });
 
@@ -215,6 +216,15 @@ class MenuItemStyleData {
   ///    <https://material.io/design/interaction/states.html#anatomy>.
   final WidgetStateProperty<Color?>? overlayColor;
 
+  /// The cursor for a mouse pointer when it enters or is hovering over a menu item.
+  ///
+  /// {@macro flutter.material.InkWell.mouseCursor}
+  ///
+  // TODO(Ahmed): Update to [WidgetStateMouseCursor.adaptiveClickable]
+  // when it's supported by the min version of the package [Flutter>=3.41.0]
+  /// If this property is null, [WidgetStateMouseCursor.clickable] will be used.
+  final MouseCursor? mouseCursor;
+
   /// A builder to customize the selected menu item.
   ///
   /// If this callback is null, the selected menu item will be displayed as other [items].
@@ -237,12 +247,14 @@ class MenuItemStyleData {
     EdgeInsetsGeometry? padding,
     BorderRadius? borderRadius,
     WidgetStateProperty<Color?>? overlayColor,
+    MouseCursor? mouseCursor,
     SelectedMenuItemBuilder? selectedMenuItemBuilder,
   }) {
     return MenuItemStyleData(
       padding: padding ?? this.padding,
       borderRadius: borderRadius ?? this.borderRadius,
       overlayColor: overlayColor ?? this.overlayColor,
+      mouseCursor: mouseCursor ?? this.mouseCursor,
       selectedMenuItemBuilder: selectedMenuItemBuilder ?? this.selectedMenuItemBuilder,
     );
   }
