Change the Cursor explictly without MouseRegion in Flutter

Question

Is it possible to change the appearance of the cursor in a windows and web app without doing so with a MouseRegion? I currently have a custom widget which uses a CustomPainter to paint multiple shapes on the canvas and with a MouseRegion I'm listening to the mouse events (enter/exit) to determine which shapes is the mouse hovering on. My problem is if I use a Mouse Region to wrap the CustomPainter, it will change the cursor even if the user is not on a shape on the canvas but rather is hovering in the space between the shapes.

Is there a way I can explicitly tell flutter to change the cursor to something when I need it, something along the line of, for example Mouse.of(context) = SystemMouseCursor.text?

• Edin: Would you please have a look if my answer worked for you?
• Fabrizio: Yes, it works, thanks! I conjunction with an inherited widget/state management solution it seems to be the best solution for me.

Answer 1

You could try something like this where you just wrap your entire view in a MouseRegion and then change the cursor with a setState:

import 'package:flutter/material.dart';
import 'package:flutter/services.dart'; // <----
class Home extends StatefulWidget {
 const Home({Key? key}) : super(key: key);
 @override
 _HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
 SystemMouseCursor cursor = SystemMouseCursors.zoomIn; // <----
 @override
 Widget build(BuildContext context) {
 return MouseRegion( // <----
 cursor: cursor, // <----
 child: Scaffold(
 body: Center(
 child: TextButton(onPressed: () {
 cursor = SystemMouseCursors.grab; // <----
 setState(() {}); // <----
 }, child: const Text("Change Cursor")),
 ),
 ),
 );
 }
}

Hope it helps

Answer 2

The Stack widget can help you with that. It can be as big as it's unaligned child, so you can use a stack and fill your borders (of a square for example) with a mouse region if you don't want your entire shape inside that for example:

Stack(
 children: [
 const SizedBox.square(dimension: 50), //Unpositioned child
 
 //Four sides
 Positioned(
 left: 0,
 top: 3,
 bottom: 3,
 child: GestureDetector(
 onScaleUpdate: (details) => debugPrint(details.toString()),
 child: const MouseRegion(
 cursor: SystemMouseCursors.resizeLeftRight,
 child: SizedBox(width: 3),
 ),
 ),
 ),
 Positioned(
 right: 0,
 top: 3,
 bottom: 3,
 child: GestureDetector(
 onScaleUpdate: (details) => debugPrint(details.toString()),
 child: const MouseRegion(
 cursor: SystemMouseCursors.resizeLeftRight,
 child: SizedBox(width: 3),
 ),
 ),
 ),
 Positioned(
 top: 0,
 right: 3,
 left: 3,
 child: GestureDetector(
 onScaleUpdate: (details) => debugPrint(details.toString()),
 child: const MouseRegion(
 cursor: SystemMouseCursors.resizeUpDown,
 child: SizedBox(height: 3),
 ),
 ),
 ),
 Positioned(
 bottom: 0,
 right: 3,
 left: 3,
 child: GestureDetector(
 onScaleUpdate: (details) => debugPrint(details.toString()),
 child: const MouseRegion(
 cursor: SystemMouseCursors.resizeUpDown,
 child: SizedBox(height: 3),
 ),
 ),
 ),
 //Four corners
 Positioned(
 left: 0,
 top: 0,
 child: GestureDetector(
 onScaleUpdate: (details) => debugPrint(details.toString()),
 child: const MouseRegion(
 cursor: SystemMouseCursors.resizeUpLeft,
 child: SizedBox.square(dimension: 3),
 ),
 ),
 ),
 Positioned(
 right: 0,
 top: 0,
 child: GestureDetector(
 onScaleUpdate: (details) => debugPrint(details.toString()),
 child: const MouseRegion(
 cursor: SystemMouseCursors.resizeUpRight,
 child: SizedBox.square(dimension: 3),
 ),
 ),
 ),
 Positioned(
 bottom: 0,
 left: 0,
 child: GestureDetector(
 onScaleUpdate: (details) => debugPrint(details.toString()),
 child: const MouseRegion(
 cursor: SystemMouseCursors.resizeDownLeft,
 child: SizedBox.square(dimension: 3),
 ),
 ),
 ),
 Positioned(
 bottom: 0,
 right: 0,
 child: GestureDetector(
 onScaleUpdate: (details) => debugPrint(details.toString()),
 child: const MouseRegion(
 cursor: SystemMouseCursors.resizeDownRight,
 child: SizedBox.square(dimension: 3),
 ),
 ),
 ),
 ],
)