CODEWITHSUNDEEP
macosflutterflutter-desktop
Eleandro Duzentos
Eleandro Duzentos

Reputation: 1568

How to change Flutter Desktop cursor pointer?

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?

Upvotes: 5

Views: 7108

Answers (2)

Gpack
Gpack

Reputation: 2203

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

Upvotes: 3

smorgan
smorgan

Reputation: 21599

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

Upvotes: 18

Related Questions