위젯으로 나만의 마우스 커서 만들기

customcursor.dart

import 'dart:async';
import 'dart:ui';

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

void main() {
  runApp(MaterialApp(
    home: Scaffold(body: Board()),
    debugShowCheckedModeBanner: false,
  ));
}

final size = window.physicalSize / window.devicePixelRatio;

class Board extends StatefulWidget {
  @override
  _BoardState createState() => _BoardState();
}

class _BoardState extends State<Board> {
  final List<Offset> _points = [];

  final StreamController<List<Offset>> _streamer =
      StreamController<List<Offset>>();

  Stream<List<Offset>> get _point$ => _streamer.stream;

  @override
  Widget build(BuildContext context) => MouseRegion(
        cursor: SystemMouseCursors.none,
        onHover: (details) => _streamer.add(_points
          ..clear()
          ..add(details.localPosition)),
        child: StreamBuilder<List<Offset>>(
          initialData: _points,
          stream: _point$,
          builder: (context, snapshot) =>
          // Cursor Widget
              CustomPaint(size: size, painter: Painter(_points)),
        ),
      );
}

class Painter extends CustomPainter {
  static const radius = 10.0;

  static final fill = Paint()..color = Colors.red;

  final List<Offset> points;

  const Painter(this.points);

  @override
  void paint(Canvas canvas, Size size) {
    for (final point in points) canvas.drawCircle(point, 10, fill);
  }

  @override
  bool shouldRepaint(Painter oldDelegate) =>
      listEquals(points, oldDelegate.points);
}

css 적인 해법은 왜 안될까..?

body {
  cursor: url("https://blog.kakaocdn.net/dn/BQXpN/btq3qNR67Lg/8tx8tGzkOcr5BuX5dyIaKk/img.png"),
}

참고할 플러그인
https://github.com/ZeshanGIT/fancy_cursor/blob/master/lib/fancy_cursor.dart