Flutter动画光标插件animated_cursor的使用

发布于 1周前 作者 zlyuanteng 来自 Flutter

Flutter动画光标插件 animated_cursor 的使用

预览

Preview

简介

欢迎使用Flutter的Animated Cursor包!这个包提供了一个可定制的动画光标小部件,您可以轻松地将其集成到您的Flutter项目中。

安装

添加依赖项到 pubspec.yaml

要使用最新版本的 animated_cursor,请将以下行添加到您的 pubspec.yaml 文件中:

dependencies:
  animated_cursor: ^1.0.5

安装

您可以通过命令行安装包: 使用 Flutter:

$ flutter pub get

导入包

import 'package:animated_cursor/animated_cursor.dart';

使用方法

AnimatedCursor(
  circleColor: Colors.red,
  dotColor: Colors.red,
  backgroundColor: Colors.black,
  borderWidth: 2,
  child: Container(color: Colors.black),
);

Animated Cursor 属性

名称 类型 默认值 描述
child Widget 动画光标下的子部件。
cursor MouseCursor? SystemMouseCursors.basic 当鼠标悬停在子部件上时显示的光标。
circleColor Color? Color(0xFF4CAF50) 动画圆圈的颜色。
dotColor Color? Color(0xFF4CAF50) 动画点的颜色。
backgroundColor Color? Colors.transparent 光标的背景颜色。
circleDuration Duration? 100 动画圆圈出现的持续时间。
dotDuration Duration? 350 动画点出现的持续时间。
borderWidth double? 1 光标边框的宽度。
shape CursorShape? BoxShape.circle 光标的形状(圆形或矩形)。
borderRadius BorderRadius? 100 光标的圆角半径(当形状设置为矩形时适用)。

示例代码

下面是一个完整的示例demo,展示了如何在Flutter应用中使用 animated_cursor 包:

import 'package:animated_cursor/animated_cursor.dart';
import 'package:flutter/material.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',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.red,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Animated Cursor Example'),
        ),
        body: Center(
          child: AnimatedCursor(
            circleColor: Colors.red,
            dotColor: Colors.red,
            backgroundColor: Colors.black,
            borderWidth: 2,
            child: Container(
              width: 300,
              height: 300,
              color: Colors.black,
              child: const Center(
                child: Text(
                  'Hover over me!',
                  style: TextStyle(color: Colors.white, fontSize: 20),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


当然,以下是如何在Flutter项目中使用animated_cursor插件来实现动画光标的示例代码。animated_cursor插件允许你在Flutter应用中创建自定义的动画光标。

首先,你需要在你的pubspec.yaml文件中添加animated_cursor依赖:

dependencies:
  flutter:
    sdk: flutter
  animated_cursor: ^最新版本号  # 请替换为最新的版本号

然后运行flutter pub get来获取依赖。

接下来,你可以在你的Flutter应用中使用这个插件。以下是一个完整的示例,展示如何在一个自定义的StatefulWidget中使用AnimatedCursor

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

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

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

class AnimatedCursorDemo extends StatefulWidget {
  @override
  _AnimatedCursorDemoState createState() => _AnimatedCursorDemoState();
}

class _AnimatedCursorDemoState extends State<AnimatedCursorDemo> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Animated Cursor Demo'),
      ),
      body: Center(
        child: Stack(
          children: [
            // 背景内容
            Container(
              color: Colors.grey[200],
              child: Center(
                child: Text(
                  'Hover over this text',
                  style: TextStyle(fontSize: 24, color: Colors.black),
                ),
              ),
            ),
            // 动画光标
            Positioned(
              top: 100, // 调整位置以适应你的布局
              left: 100, // 调整位置以适应你的布局
              child: AnimatedCursor(
                cursor: CustomCursor(
                  // 你可以自定义光标图像和动画
                  image: AssetImage('assets/cursor.png'), // 使用你的光标图片
                  animationDuration: Duration(milliseconds: 500),
                  animationCurve: Curves.easeInOut,
                ),
                child: Container(
                  width: 50, // 光标作用的区域宽度
                  height: 50, // 光标作用的区域高度
                  decoration: BoxDecoration(
                    border: Border.all(color: Colors.transparent, width: 0.0),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

// 自定义光标类
class CustomCursor extends Cursor {
  final ImageProvider image;
  final Duration animationDuration;
  final Curve animationCurve;

  CustomCursor({
    required this.image,
    required this.animationDuration,
    required this.animationCurve,
  });

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: AnimationController(
        duration: animationDuration,
        vsync: Vsynchronizer(),
      )..repeat(reverse: true),
      child: Image(image: image),
      builder: (context, child) {
        final animation = AnimationController.of(context);
        return Transform.rotate(
          angle: animation.value * 2.0 * 3.141592653589793,
          child: child,
        );
      },
    );
  }
}

// 一个简单的vsync实现,用于动画控制器
class Vsynchronizer extends TickerProvider with SingleTickerProviderStateMixin {}

请注意,上面的代码中有几个关键点:

  1. 光标图片:你需要将光标图片(例如cursor.png)添加到你的assets文件夹中,并在pubspec.yaml中声明它。
  2. 自定义光标类CustomCursor类继承自Cursor并实现了自定义的动画效果。在这个例子中,光标会旋转。
  3. 动画控制器AnimatedBuilderAnimationController一起使用来控制光标的动画。

请根据你的具体需求调整光标的位置、大小、动画效果等。希望这个示例代码对你有所帮助!

回到顶部