Flutter动画鼠标光标插件animated_mouse_cursor的使用

Flutter 动画鼠标光标插件 animated_mouse_cursor 的使用

动画鼠标光标插件 animated_mouse_cursor

此 Flutter 插件可以在 Flutter Web 上创建漂亮的自定义鼠标光标。

演示

安装

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

dependencies:
  animated_mouse_cursor: <latest-version>

或者通过命令行添加：

flutter pub add animated_mouse_cursor

引入插件

在你的 Dart 文件中引入插件：

import 'package:animated_mouse_cursor/animated_mouse_cursor.dart';

使用方法

AnimatedMouseCursor 小部件允许你为鼠标创建默认光标。你可以将该小部件包裹在 MaterialApp 或单个 Widget 中。

以下是一个完整的示例代码：

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

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

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

  // 这是应用程序的根小部件。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Animated Cursor Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: AnimatedMouseCursor(
        child: const MyHomePage(title: 'Animated Cursor Demo'),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return AnimatedMouseCursor(
      child: Scaffold(
        appBar: AppBar(
          backgroundColor: Theme.of(context).colorScheme.inversePrimary,
          title: Text(widget.title),
        ),
        body: Center(
          child: Text(
            "Animated cursor",
            style: Theme.of(context).textTheme.titleLarge,
          ),
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个包含 AnimatedMouseCursor 的应用。AnimatedMouseCursor 包裹了整个应用的主页，使得鼠标光标在整个应用范围内都是动画化的。

如果你希望在特定的 Widget 上实现动画光标效果，可以使用 AnimatedCursorMouseRegion 小部件。以下是一个简单的示例：

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

class CustomCursorPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Custom Cursor Example'),
      ),
      body: Center(
        child: AnimatedCursorMouseRegion(
          heightMultiplier: 5,
          child: Text(
            "Hover Widget Animation",
            style: Theme.of(context).textTheme.titleLarge,
          ),
        ),
      ),
    );
  }
}