Home/ Questions/Q 1391
Answered
Gary Christan
Asked: 2022-02-19T11:23:30+00:00

Change the Cursor explicitly without MouseRegion in Flutter

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?

cursorfluttermouseregion
Share

1 Answer

  1. Best Answer

    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

    • 0

Leave an answer

You must login to add an answer.

Need An Account,