Flutter鼠标跟随插件mouse_follower的使用

Mouse Follower 是一个强大的包，它使你能够为应用程序创建自定义鼠标跟随效果，突破设计限制。通过提供设计任何形状、简单属性和易用性等附加功能，它在增强用户交互方面提供了无与伦比的灵活性和创造力。

为什么选择 mouse_follower？

🚀 实现简单
🔌 支持速度和灵敏度设置
💾 透明度控制
⚡ 支持任意子组件
↩️ 位置控制
❤️ 自定义光标形状本身
💻 提供文档和教程
🛡️ 支持空安全
🖨️ 可定制的设计

入门指南

安装

在 pubspec.yaml 文件中添加依赖：

dependencies:
  mouse_follower:

然后导入库路径：

import 'package:mouse_follower/mouse_follower.dart';

配置应用

将 MouseFollower 组件添加到你的应用中，如下所示：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MouseFollower(
          showDefaultMouseStyle: true,
          child: MyHomePage(),
      )
    );
  }
}

`MouseFollower()` 组件属性

属性	必填	默认值	描述
key	false	-	组件键
isVisible	false	`kIsWeb`	是否可见
child	true	-	子组件（建议放置整个应用）
mouseStylesStack	false	`[MouseStyle()]`	多个选项的 `MouseStyle` 栈
onHoverMouseStylesStack	false	`[MouseStyle()]`	悬停时显示的 `MouseStyle` 栈
showDefaultMouseStyle	false	`true`	当 `mouseStylesStack` 和 `onHoverMouseStylesStack` 为空时是否显示默认光标
defaultMouseCursor	false	`MouseCursor.defer`	更改默认的系统光标图标
onHoverMouseCursor	false	`MouseCursor.defer`	更改 `MouseOnHoverEvent` 组件的默认系统光标图标

添加自定义鼠标样式

Widget build(BuildContext context) {
  return MaterialApp(
      home: MouseFollower(
            mouseStylesStack: [
                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: MyHomePage())
  );
}

添加悬停时的自定义鼠标样式

Widget build(BuildContext context) {
  return MaterialApp(
      home: MouseFollower(
            onHoverMouseStylesStack: [
                MouseStyle(size: const Size(50,50),
                    latency: const Duration(milliseconds: 25),
                    decoration: BoxDecoration(shape: BoxShape.circle,
                    color: Theme.of(context).primaryColor.withAlpha(150)),
            ),
          ],
        child: MyHomePage())
  );
}

/// 要激活悬停样式，需要将所需组件包裹在 `MouseOnHoverEvent` 中。
...
  MouseOnHoverEvent(child: Text("Hover Me!"))
...

`MouseStyle()` 组件属性

属性	默认值	描述
key	-	组件键
child	-	自定义子组件
size	`Size(15,15)`	设置鼠标样式的大小
decoration	-	自定义装饰
latency	`Duration(milliseconds: 25)`	设置鼠标跟随样式的延迟
alignment	`Alignment.center`	默认情况下鼠标样式居中对齐
opacity	`1.0`	设置样式的透明度，从 0.0（不可见）到 1.0（可见）
opaque	`false`	-
animationDuration	`Duration(milliseconds: 300)`	在不同组件之间切换样式时的动画持续时间
animationCurve	`Curves.easeOutExpo`	更改动画样式
transform	-	-
visibleOnHover	`false`	如果希望在悬停事件中启用相同的样式，则启用此属性

`MouseOnHoverEvent()` 组件属性

属性	类型	描述
key	-	组件键
child	`Widget`	必填，要包裹的子组件
decoration	`BoxDecoration?`	覆盖默认或初始化的装饰
size	`Size?`	覆盖默认或初始化的鼠标大小
mouseChild	`Widget?`	覆盖默认或初始化的鼠标子组件
onHoverMouseCursor	`MouseCursor?`	覆盖默认或初始化的鼠标光标
customOnHoverMouseStylesStack	`List<MouseStyle>?`	覆盖默认或初始化的鼠标样式栈
animationCurve	`Curve?`	覆盖默认或初始化的动画曲线
animationDuration	`Duration?`	覆盖默认或初始化的动画持续时间
opacity	`double?`	覆盖默认或初始化的透明度
alignment	`Alignment?`	覆盖默认或初始化的对齐方式
latency	`Duration?`	覆盖默认或初始化的延迟

示例代码

以下是一个完整的示例代码，展示了如何使用 mouse_follower 插件来实现各种鼠标跟随效果：

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});

  @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;
  }
}

以上代码展示了如何使用 mouse_follower 插件来创建一个包含多种鼠标跟随效果的应用程序。你可以根据需要调整和扩展这些示例代码，以满足具体需求。

更多关于Flutter鼠标跟随插件mouse_follower的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

gougou168 1楼•3 天前

更多关于Flutter鼠标跟随插件mouse_follower的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，以下是如何在Flutter项目中使用mouse_follower插件的示例代码。这个插件允许你创建一个跟随鼠标指针移动的部件。首先，你需要确保你的Flutter项目已经添加了mouse_follower依赖。

1. 添加依赖

在你的pubspec.yaml文件中添加以下依赖：

dependencies:
  flutter:
    sdk: flutter
  mouse_follower: ^latest_version  # 请替换为实际最新版本号

然后运行flutter pub get来安装依赖。

2. 导入包

在你的Dart文件中导入mouse_follower包：

import 'package:mouse_follower/mouse_follower.dart';

3. 使用MouseFollower

下面是一个简单的示例，展示如何使用MouseFollower来创建一个跟随鼠标移动的圆形部件。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Mouse Follower Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MouseFollowerDemo(),
    );
  }
}

class MouseFollowerDemo extends StatefulWidget {
  @override
  _MouseFollowerDemoState createState() => _MouseFollowerDemoState();
}

class _MouseFollowerDemoState extends State<MouseFollowerDemo> with SingleTickerProviderStateMixin {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Mouse Follower Demo'),
      ),
      body: MouseRegion(
        onEnter: (details) {
          // 当鼠标进入区域时，你可以在这里添加逻辑，比如显示跟随器
        },
        onExit: (details) {
          // 当鼠标离开区域时，你可以在这里添加逻辑，比如隐藏跟随器
        },
        child: Stack(
          children: <Widget>[
            // 其他UI元素
            Positioned(
              top: 0,
              left: 0,
              right: 0,
              bottom: 0,
              child: MouseFollower(
                // 这个builder函数会每次鼠标移动时被调用，并返回跟随鼠标的部件
                builder: (context, position) {
                  return Container(
                    width: 50,
                    height: 50,
                    decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      color: Colors.red.withOpacity(0.7),
                    ),
                    child: Center(
                      child: Text(
                        '👀',
                        style: TextStyle(color: Colors.white, fontSize: 24),
                      ),
                    ),
                    // 设置跟随器部件的位置
                    position: position,
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

解释

MouseRegion：这个部件用于检测鼠标是否进入或离开某个区域。虽然MouseFollower本身不需要MouseRegion，但在这个示例中，我们可以使用它来控制跟随器的显示逻辑（尽管在这个简单示例中没有实际使用）。
MouseFollower：这个部件负责创建并更新跟随鼠标的部件。builder函数接收上下文和当前鼠标位置，并返回一个需要跟随鼠标移动的部件。
Position：MouseFollower的builder函数接收一个position参数，这个参数是Offset类型，表示当前鼠标的位置。你可以使用这个位置来设置跟随器部件的位置。

这个示例展示了基本的mouse_follower使用方法。你可以根据需要自定义跟随器部件的样式和行为。

Flutter鼠标跟随插件mouse_follower的使用

Flutter鼠标跟随插件mouse_follower的使用

为什么选择 mouse_follower？

入门指南

安装

配置应用

MouseFollower() 组件属性

添加自定义鼠标样式

添加悬停时的自定义鼠标样式

MouseStyle() 组件属性

MouseOnHoverEvent() 组件属性

示例代码

1. 添加依赖

2. 导入包

3. 使用MouseFollower

解释

`MouseFollower()` 组件属性

`MouseStyle()` 组件属性

`MouseOnHoverEvent()` 组件属性