HandCursor for Flutter Web

(in 3 simple steps)

Flutter logo and a hand cursor

⚠ Starting with dev channel build version 1.19.0–3.0.pre there is built-in support for the pointer cursor. ⚠

A workaround for this is the following:

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Your awesome app</title>
<script defer src="main.dart.js" type="application/javascript"></script>
<body id="app-container">
import 'package:flutter_web/gestures.dart';
import 'package:flutter_web/widgets.dart';
import 'dart:html' as html;
class HandCursor extends Listener { static final appContainer = html.window.document.getElementById('app-container'); HandCursor({Widget child}) : super(
onPointerHover: (PointerHoverEvent evt) {
onPointerExit: (PointerExitEvent evt) {
child: child
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: <Widget>[
child: IconButton(
onPressed: () {
// let others know
// you can
// do some magic
icon: Icon(Icons.star)



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store