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

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 h

Answer 1

The previous method is deprecated. Here is the updated code

import 'package:flutter/gestures.dart';
import 'package:flutter/widgets.dart';
import 'package:universal_html/prefer_sdk/html.dart' as html;

class HandCursor extends MouseRegion {
  static final appContainer = html.window.document.getElementById('app-container');
  HandCursor({Widget child})
      : super(
          onHover: (PointerHoverEvent evt) {
            appContainer.style.cursor = 'pointer';
          },
          onExit: (PointerExitEvent evt) {
            appContainer.style.cursor = 'default';
          },
          child: child,
        );
}

And in your pubspec.yaml file, add universal_html as a package as a dependency. The version may change.

dependencies:
  flutter:
    sdk: flutter
  universal_html: ^1.1.4

You still want to have an id of app-container attached to the body of your html. Here is my html file.

You want to put the code for the HandCursor widget in its own file. You can call it hand_cursor.dart. And to use it on the widget you want the hand to show up on, import it into the file you're working on and wrap the widget you want in the HandCursor widget.