flutter icon indicating copy to clipboard operation
flutter copied to clipboard

Add `SystemMouseCursor` Support to `GestureDetector` and `InkWell`

Open yashas-hm opened this issue 1 year ago • 1 comments

Use case

Currently, when using GestureDetector or InkWell in Flutter Web to build custom buttons or interactive components, the cursor does not change to a pointer (or other relevant cursor styles) on hover. To achieve this behavior, developers must wrap these widgets with a MouseRegion. While this works, it adds extra boilerplate and can make the code less clean and maintainable.

Proposal

Introduce a SystemMouseCursor property to GestureDetector and InkWell, allowing developers to directly specify the desired cursor. This property could default to SystemMouseCursor.basic to maintain existing behavior, while enabling more straightforward customization without the need for an additional MouseRegion.

Example

GestureDetector(
  onTap: () {},
  systemMouseCursor: SystemMouseCursor.click, // New property
  child: Text("Click Me"),
);

PS: It is a very simple addition to the code to add the mouse region widget but this would be good to have making development easier.

yashas-hm avatar Nov 23 '24 04:11 yashas-hm

@yashas-hm In InkWell we already have this behavior of selecting the desired cursor. We can do this:

 InkWell(
   onTap: () {},
   mouseCursor: SystemMouseCursors.click, // Or mouseCursor: WidgetStateMouseCursor.clickable, 
   child: Container(
       width: 100,
       height: 100,
       color: Colors.red,
  ),
),

If I'm not mistaken, we'll be able to use WidgetStateMouseCursor.fromMap() and WidgetStateMouseCursor.resolveWith() in the next release.

We will have to introduce this behavior in GestureDetector.

Mairramer avatar Nov 23 '24 14:11 Mairramer

Hi @yashas-hm, there's an issue tracking adding the mouse cursor to other widgets in https://github.com/flutter/flutter/issues/58192. See https://github.com/flutter/flutter/issues/58192#issuecomment-637134607 for the recommendation with GestureDetector

Kindly leave a comment in the original issue.

Closing from here as duplicate.

Thank you

danagbemava-nc avatar Nov 25 '24 07:11 danagbemava-nc

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

github-actions[bot] avatar Dec 09 '24 08:12 github-actions[bot]