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?

score 15 · Accepted Answer · answered Jun 26 '20 at 02:51

15

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(),
)

answered Jun 26 '20 at 02:51

smorgan

20,228
3
47
55

1

Does this mean that any time you want to change the cursor you need to rebuild all the subwidgets? – Gerard Feb 22 '21 at 14:40
1

@Gerard not necessarily, it could be like AnimatedBuilder where child is not rebuilt. however I have no confirmation – SIMMORSAL Oct 13 '21 at 22:14
Thanks, for Flutter web this means links without Stateful Wiget. – user2244131 Feb 06 '22 at 09:40

score 3 · Answer 2 · answered Aug 02 '21 at 14:48

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

In summary:

Use a MouseRegion to hide the real cursor but still save its position with onHover
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(),
        ),
      ],
    )
  ),
}

How to change Flutter Desktop cursor pointer?

2 Answers2