How to change Flutter Desktop cursor pointer?

Viewed 3754

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?

2 Answers

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

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(),
        ),
      ],
    )
  ),
}
Related