mouse_follower 1.2.0

Enhance your application with Mouse Follower, enabling easy customization of cursor effects. Designing your own effects has never been easier.

example/lib/main.dart

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Mouse Follower Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
        useMaterial3: true,
      ),
      home: MouseFollower(
          isVisible: kIsWeb,
          onHoverMouseStylesStack: [
            MouseStyle(
              size: const Size(7, 7),
              latency: const Duration(milliseconds: 25),
              decoration: BoxDecoration(color: Theme.of(context).primaryColor, shape: BoxShape.circle),
            ),
            MouseStyle(
              size: const Size(26, 26),
              latency: const Duration(milliseconds: 75),
              visibleOnHover: false,
              decoration: BoxDecoration(
                  color: Colors.transparent,
                  shape: BoxShape.circle,
                  border: Border.all(color: Theme.of(context).primaryColor)),
            ),
          ],
          child: const MouseFollowerDemoPage()),
    );
  }
}

class MouseFollowerDemoPage extends StatelessWidget {
  const MouseFollowerDemoPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: [
          ContainerWithMouseStyle(title: "Default Style:", color: Colors.grey.shade50),
          const Divider(height: 1),
          MouseOnHoverEvent(
              child: ContainerWithMouseStyle(title: "OnHover Main Style:", color: Colors.red.shade50)),
          const Divider(height: 1),
          MouseOnHoverEvent(
              onHoverMouseCursor: SystemMouseCursors.none,
              customOnHoverMouseStylesStack: [
                const MouseStyle(
                  alignment: Alignment.topCenter,
                  size: Size(15, 15),
                  latency: Duration(milliseconds: 75),
                  opacity: 0.5,
                  decoration: BoxDecoration(shape: BoxShape.circle, color: Colors.red),
                ),
                MouseStyle(
                  size: const Size(15, 15),
                  latency: const Duration(milliseconds: 0),
                  child: kIsWeb ? Image.network("images/cursor.png") : Image.asset("images/cursor.png"),
                ),
              ],
              child: ContainerWithMouseStyle(title: "Custom Cursor:", color: Colors.purple.shade50)),
          const Divider(height: 1),
          MouseOnHoverEvent(customOnHoverMouseStylesStack: [
            MouseStyle(
              animationDuration: const Duration(milliseconds: 0),
              opacity: 0.4,
              size: const Size(200, 120),
              alignment: Alignment.centerRight,
              child: Container(
                height: 100,
                width: 250,
                clipBehavior: Clip.antiAliasWithSaveLayer,
                decoration: const BoxDecoration(borderRadius: BorderRadius.all(Radius.circular(10))),
                child: kIsWeb
                    ? Image.network("images/mouse_follower.jpg", fit: BoxFit.fill)
                    : Image.asset("images/mouse_follower.jpg", fit: BoxFit.fill),
              ),
            ),
          ], child: ContainerWithMouseStyle(title: "With Background:", color: Colors.green.shade50)),
          const Divider(height: 1),
          MouseOnHoverEvent(
              onHoverMouseCursor: SystemMouseCursors.none,
              customOnHoverMouseStylesStack: [
                const MouseStyle(
                  size: Size(50, 50),
                  latency: Duration(milliseconds: 0),
                  child: RawMagnifier(
                    size: Size(80, 80),
                    magnificationScale: 1.5,
                    decoration: MagnifierDecoration(shape: CircleBorder()),
                  ),
                ),
                MouseStyle(
                  size: const Size(15, 15),
                  latency: const Duration(milliseconds: 0),
                  child: kIsWeb ? Image.network("images/magnifier.png") : Image.asset("images/magnifier.png"),
                ),
              ],
              child: ContainerWithMouseStyle(title: "Magnifier Function:", color: Colors.blue.shade50)),
          const Divider(height: 1),
          MouseOnHoverEvent(
              onHoverMouseCursor: SystemMouseCursors.none,
              customOnHoverMouseStylesStack: [
                MouseStyle(
                  alignment: Alignment.bottomRight,
                  size: const Size(15, 15),
                  latency: const Duration(milliseconds: 0),
                  // decoration: BoxDecoration(shape: BoxShape.circle, color: Colors.red),
                  child: CustomPaint(
                    size: const Size(15, 15),
                    painter: CurvedLinePainter(),
                  ),
                ),
                const MouseStyle(
                  alignment: Alignment.topLeft,
                  size: Size(15, 15),
                  latency: Duration(milliseconds: 0),
                  decoration: BoxDecoration(shape: BoxShape.circle, color: Colors.red),
                ),
                const MouseStyle(
                  alignment: Alignment.topRight,
                  size: Size(15, 15),
                  latency: Duration(milliseconds: 0),
                  decoration: BoxDecoration(shape: BoxShape.circle, color: Colors.red),
                ),
                const MouseStyle(
                  size: Size(20, 20),
                  latency: Duration(milliseconds: 0),
                  decoration: BoxDecoration(shape: BoxShape.circle, color: Colors.black),
                ),
                const MouseStyle(
                  size: Size(5, 5),
                  latency: Duration(milliseconds: 0),
                  decoration: BoxDecoration(shape: BoxShape.circle, color: Colors.red),
                ),

              ],
              child: ContainerWithMouseStyle(title: "Custom Draw:", color: Colors.brown.shade50)),
        ],
      ),
    );
  }
}

class ContainerWithMouseStyle extends StatelessWidget {
  final String title;
  final Color color;
  const ContainerWithMouseStyle({super.key, required this.title, required this.color});

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(20),
      alignment: Alignment.centerLeft,
      width: MediaQuery.of(context).size.width,
      height: 150,
      color: color,
      child: Text(title, style: const TextStyle(fontSize: 20)),
    );
  }
}

class CurvedLinePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..color = Colors.red
      ..style = PaintingStyle.stroke
      ..strokeWidth = 3.0;

    Path path = Path()
      ..moveTo(0, 0) // Starting point
      ..quadraticBezierTo(40, -10, 30, 10); // Define a quadratic Bezier curve

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }
}