Logo

Flutter-Web: Mouse hover -> Change cursor to pointer

UPDATE (2021/05/11):

Flutter now natively has Hover Events implemented Widgets.

There is a MouseCursor for Widgets like RaisedButton and properties like hoverColor or hoverElevation.

https://api.flutter.dev/flutter/rendering/MouseCursor-class.html

You can also use an InkWell anywhere else as stated in the accepted answer.

Original Question:

How can the cursor appearance be changed within Flutter?
I know that with the Listener() Widget we can listen for Mouse-Events,
but I haven't found any information regarding hovering events for flutter web.
Has someone found a soulution yet?

Solution to answer:

I had difficulties finding documentation on the now built-in support. Here is what helped me: https://github.com/flutter/flutter/issues/58260

And this did the trick for me, without changing index.html etc.

MouseRegion(
  cursor: SystemMouseCursors.click,
    child: GestureDetector(
      child: Icon(
        Icons.add_comment,
        size: 20,
        ),
      onTap: () {},
    ),
  ),

Also see the official documentation: https://api.flutter.dev/flutter/rendering/MouseCursor-class.html

Widget build(BuildContext context) {
  return Center(
    child: MouseRegion(
      cursor: SystemMouseCursors.text,
      child: Container(
        width: 200,
        height: 100,
        decoration: BoxDecoration(
          color: Colors.blue,
          border: Border.all(color: Colors.yellow),
        ),
      ),
    ),
  );
}

And here https://api.flutter.dev/flutter/material/MaterialStateMouseCursor-class.html yet another wonderful example from the official docs that "...defines a mouse cursor that resolves to SystemMouseCursors.forbidden when its widget is disabled."

messageCircle