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

Question

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?

Answer 1

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."