Is there any rotation mouse pointer to Flutter?

Question

I'm looking for a rotation cursor for Flutter. I know resizing cursors do exist, SystemMouseCursors.resizeUpRightDownLeft, for example.

I would like a curved version of this or even a similar one to photoshop's rotating cursor.

Does anyone know where could I find this? Thank you in advance.

Solution

You could use a custom MouseRegion:

MouseRegion(
  cursor: SystemMouseCursors.none,
  onHover: (event) => setState(() => cursorPosition = event.localPosition),
  onExit: (event) => setState(() => cursorPosition = null),
  child: Stack(
    children: [
      child,
      if (cursorPosition != null)
        AnimatedPositioned(
          duration: const Duration(),
          left: cursorPosition?.dx,
          top: cursorPosition?.dy,
          child: Icon(Icons.refresh, color: widget.cursorColor),
        ),
    ],
  ),
)

In this custom MouseRegion:

1. Hide the cursor with cursor: SystemMouseCursors.none
2. Keep the position of the would-be cursor with onHover and onExit
3. Display the child and the custom cursor in a Stack

Full example [StatefulWidget]

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'MouseRegion with custom cursor',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: MouseRegionWithCustomCursor(
        cursor: const Icon(Icons.refresh, color: Colors.white),
        child: Container(width: 300, height: 200, color: Colors.blueGrey),
      ),
    );
  }
}

class MouseRegionWithCustomCursor extends StatefulWidget {
  final Widget cursor;
  final Widget child;

  const MouseRegionWithCustomCursor({
    Key? key,
    required this.cursor,
    required this.child,
  }) : super(key: key);

  @override
  _MouseRegionWithCustomCursorState createState() =>
      _MouseRegionWithCustomCursorState();
}

class _MouseRegionWithCustomCursorState
    extends State<MouseRegionWithCustomCursor> {
  Offset? cursorPosition;

  @override
  Widget build(BuildContext context) {
    return MouseRegion(
      cursor: SystemMouseCursors.none,
      onHover: (event) => setState(() => cursorPosition = event.localPosition),
      onExit: (event) => setState(() => cursorPosition = null),
      child: Stack(
        children: [
          widget.child,
          if (cursorPosition != null)
            AnimatedPositioned(
              duration: const Duration(),
              left: cursorPosition?.dx,
              top: cursorPosition?.dy,
              child: widget.cursor,
            ),
        ],
      ),
    );
  }
}

BONUS 1 : HookWidget

Same solution using a HookWidget to get rid of the StatefulWidget:

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'MouseRegion with custom cursor',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: MouseRegionWithCustomCursor(
        cursor: const Icon(Icons.refresh, color: Colors.white),
        child: Container(width: 300, height: 200, color: Colors.blueGrey),
      ),
    );
  }
}

class MouseRegionWithCustomCursor extends HookWidget {
  final Widget cursor;
  final Widget child;

  const MouseRegionWithCustomCursor({
    Key? key,
    required this.cursor,
    required this.child,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final cursorPosition = useState<Offset?>(null);
    return MouseRegion(
      cursor: SystemMouseCursors.none,
      onHover: (event) => cursorPosition.value = event.localPosition,
      onExit: (event) => cursorPosition.value = null,
      child: Stack(
        children: [
          child,
          if (cursorPosition.value != null)
            AnimatedPositioned(
              duration: const Duration(),
              left: cursorPosition.value?.dx,
              top: cursorPosition.value?.dy,
              child: cursor,
            ),
        ],
      ),
    );
  }
}

BONUS 2 : Rotating Cursor

Still using HookWidget, now the cursor can rotate:

import 'dart:math';

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'MouseRegion with custom cursor',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: MouseRegionWithCustomCursor(
        cursor: const Icon(Icons.refresh, color: Colors.white),
        rotating: true,
        child: Container(width: 300, height: 200, color: Colors.blueGrey),
      ),
    );
  }
}

class MouseRegionWithCustomCursor extends HookWidget {
  final Widget cursor;
  final Widget child;
  final bool rotating;

  const MouseRegionWithCustomCursor({
    Key? key,
    required this.cursor,
    required this.child,
    this.rotating = false,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final cursorPosition = useState<Offset?>(null);

    return MouseRegion(
      cursor: SystemMouseCursors.none,
      onHover: (event) => cursorPosition.value = event.localPosition,
      onExit: (event) => cursorPosition.value = null,
      child: Stack(
        children: [
          child,
          if (cursorPosition.value != null)
            AnimatedPositioned(
              duration: const Duration(),
              left: cursorPosition.value?.dx,
              top: cursorPosition.value?.dy,
              child: rotating ? RotatingWidget(child: cursor) : cursor,
            ),
        ],
      ),
    );
  }
}

class RotatingWidget extends HookWidget {
  final Widget child;
  final Duration rotationDuration;

  const RotatingWidget({
    Key? key,
    required this.child,
    this.rotationDuration = const Duration(seconds: 1),
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final controller = useAnimationController(duration: rotationDuration)
      ..repeat();
    return AnimatedBuilder(
      child: child,
      animation: controller,
      builder: (context, child) {
        return Transform.rotate(
          angle: 2 * pi * controller.value,
          child: child,
        );
      },
    );
  }
}