CustomCursor for Flutter Web
How to customize the cursor in your web applications
Published in
3 min readNov 4, 2019
A while back I've published an article that detailed a hack that enabled the use of the hand cursor in a Flutter for web project.
Now, I'm updating that widget (and hack) to work within the new web projects that can be built using the master channel of Flutter and also support more than one type of cursor.
⚠ Starting with dev channel build version 1.19.0–3.0.pre there is built-in support for the
pointercursor. ⚠
The same simple 3 steps:
1. You still 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:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CustomCursor</title>
</head>
<body id="app-container">
<script src="main.dart.js" type="application/javascript"></script>
</body>
</html>2. Next, you have to create a wrapper Dart class (a widget). I called it custom_cursor.dart:
import 'package:flutter/foundation.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/widgets.dart';
import…
