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.


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?


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.

  cursor: SystemMouseCursors.click,
    child: GestureDetector(
      child: Icon(
        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."

Answered By – beneM

Answer Checked By – Marie Seifert (FlutterFixes Admin)

Leave a Reply

Your email address will not be published. Required fields are marked *