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

Starting with dev channel build version 1.19.0–3.0.pre there is built-in support for the pointer cursor. The same method as bellow is used with the difference that is applied to the Flutter app container element flt-glass-pane. Using the bellow method will just duplicate the behavior.

In order to override the pointer cursor, you can use the bellow method but applied on the flt-glass-pane element.

A workaround for this is the following:

1. You have to set an id (for example app-container on the entire body of the app's index.html template).

This is how your index.html will look like:

2. Next, you have to create a wrapper dart class. I called it hand_cursor.dart:

import 'package:flutter_web/gestures.dart';
import 'package:flutter_web/widgets.dart';
import 'package:universal_html/html.dart' as html;
// see https://pub.dev/packages/universal_html

class HandCursor extends MouseRegion {

  // get a reference to the body element that we previously altered 
  static final appContainer = html.window.document.getElementById('app-container');

  HandCursor({Widget child}) : super(
    onHover: (PointerHoverEvent evt) {
      appContainer.style.cursor='pointer';
      // you can use any of these: 
      // 'help', 'wait', 'move', 'crosshair', 'text' or 'pointer'
      // more options/details here: http://www.javascripter.net/faq/stylesc.htm
    },
    onExit: (PointerExitEvent evt) {
      // set cursor's style 'default' to return it to the original state
      appContainer.style.cursor='default';
    },
    child: child
  );

}

3. After that, wherever you want to have the hand cursor shown, you have to wrap your element in this HandCursor wrapper. See the class awesome_button.dart bellow:

import 'package:awesome_app/widgets/containers/hand_cursor.dart';
import 'package:flutter_web/material.dart';
import 'package:flutter_web/widgets.dart';

class AwesomeButton extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        HandCursor(
          child: IconButton(
            onPressed: () {
              // do some magic
            },
            icon: Icon(Icons.star)
          ),
        )
      ],
    );
  }

}

A short explanation can be found here.

A more versatile update, that works on the new web projects created with the master channel of Flutter, can be found here.

I hope it helps.