Add `SystemMouseCursor` Support to `GestureDetector` and `InkWell`
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 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.
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
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.