How to change Flutter Desktop cursor pointer?

Question

I want to change the cursor pointer on hover a certain widget, but I can't find how to achieve this.

Looking to this comment seems like they already have it for macOS, but I can't find anything about how to implement.

How can I change my cursor on hover a widget?

Solution 1

There is a cursor property on MouseRegion, which controls what cursor is shown when the pointer is in the region. For instance:

MouseRegion(
  cursor: SystemMouseCursors.text,
  child: YourWidgetHere(),
)

Solution 2

If you want to replace the mouse cursor with a custom widget, you could also follow this article.

In summary:

1. Use a MouseRegion to hide the real cursor but still save its position with onHover
2. Use a Stack and Positioned/AnimatedPositioned widget to add your custom cursor on top of the widget

// Use a stateful widget to record the cursor position
Offset position;

Widget build(BuildContext context) {
  return MouseRegion(
    cursor: SystemMouseCursors.none,
    onHover: (event) {
      setState(() {
        // Save the position of the cursor when it moves
        position = event.position; 
      });
    },
    child: Stack(
      children: [
        MyWidget(),
        AnimatedPositioned(
          duration: const Duration(milliseconds: 100),
          left: position.dx,
          top: position.dy,
          child: CustomCursor(),
        ),
      ],
    )
  ),
}

Comments

[Gerard]

Does this mean that any time you want to change the cursor you need to rebuild all the subwidgets?

[SIMMORSAL]

@Gerard not necessarily, it could be like AnimatedBuilder where child is not rebuilt. however I have no confirmation

[user2244131]

Thanks, for Flutter web this means links without Stateful Wiget.