Flutter动画时钟指示器插件animated_clock_indicator的使用

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

Flutter动画时钟指示器插件animated_clock_indicator的使用

动画时钟指示器 ⏰

一个用于Flutter的动画时钟指示器小部件，允许你在应用程序中显示可自定义的动画时钟。

Animated Clock Indicator

特性

  • ✅ 可定制 的时钟外观和行为
  • 🎨 灵活的样式 选项，用于时钟边框、分针和时针
  • 🕒 控制 动画持续时间和旋转比例
  • 💬 适用于 聊天消息气泡和其他UI元素
  • 🔍 支持 隐藏时针以增加灵活性

安装

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

dependencies:
  animated_clock_indicator: ^1.0.4

然后运行：

flutter pub get

使用方法

重要说明 📝

你必须为AnimatedClockIndicator小部件提供尺寸约束，例如使用SizedBox或Container等，以确保正确的渲染。

基本用法

const SizedBox(
  width: 80.0,
  height: 80.0,
  child: AnimatedClockIndicator(
    options: AnimatedClockIndicatorOptions(),
  ),
),

自定义时钟指示器

const SizedBox(
  width: 100.0,
  height: 100.0,
  child: AnimatedClockIndicator(
    options: AnimatedClockIndicatorOptions(
      borderWidth: 3.0,
      minuteHandWidth: 2.5,
      hourHandWidth: 3.0,
      handInset: 3.0,
      clockHandsLengthRatio: 0.618,
      minuteHandRotationDuration: Duration(milliseconds: 800),
      minuteToHourRotationRatio: 12.0,
      borderColor: Colors.orange,
      minuteHandColor: Colors.deepOrange,
      hourHandColor: Colors.orangeAccent,
    ),
  ),
),

统一时钟指示器颜色

const SizedBox(
  width: 120.0,
  height: 120.0,
  child: AnimatedClockIndicator(
    options: AnimatedClockIndicatorOptions.withUniformColor(
      color: Colors.blue,
      borderWidth: 4.0,
      minuteHandWidth: 2.5,
      hourHandWidth: 3.0,
      handInset: 3.0,
      minuteHandRotationDuration: Duration(milliseconds: 1000),
    ),
  ),
),

自定义颜色时钟指示器

const SizedBox(
  width: 140.0,
  height: 140.0,
  child: AnimatedClockIndicator(
    options: AnimatedClockIndicatorOptions(
      borderWidth: 3.5,
      minuteHandWidth: 3.0,
      hourHandWidth: 4.0,
      handInset: 2.5,
      clockHandsLengthRatio: 0.75,
      minuteHandRotationDuration: Duration(milliseconds: 900),
      borderColor: Colors.red,
      minuteHandColor: Colors.blue,
      hourHandColor: Colors.green,
      minuteHandStrokeCap: StrokeCap.butt,
      hourHandStrokeCap: StrokeCap.square,
    ),
  ),
),

没有时针的时钟指示器

const SizedBox(
  width: 160.0,
  height: 160.0,
  child: AnimatedClockIndicator(
    options: AnimatedClockIndicatorOptions(
      borderWidth: 4.0,
      minuteHandWidth: 3.0,
      hourHandWidth: 3.0,
      handInset: 4.0,
      clockHandsLengthRatio: 0, // 只有分针可见
      minuteHandRotationDuration: Duration(milliseconds: 700),
      borderColor: Colors.green,
      minuteHandColor: Colors.lightGreen,
    ),
  ),
),

自定义选项 ✨

你可以通过提供一个AnimatedClockIndicatorOptions实例来定制AnimatedClockIndicator的各种方面。

属性

  • borderWidth (double): 时钟边框的厚度（逻辑像素）。
  • minuteHandWidth (double): 分针的厚度。
  • hourHandWidth (double): 时针的厚度。
  • handInset (double): 时针尖端到时钟边缘的距离。
  • clockHandsLengthRatio (double): 时针长度与分针长度的比例（0 < 比例 ≤ 1）。
  • minuteHandRotationDuration (Duration): 分针完成一次完整旋转所需的时间。
  • minuteToHourRotationRatio (double): 分针和时针旋转速度的比例。
  • borderColor (Color): 时钟边框的颜色。
  • minuteHandColor (Color): 分针的颜色。
  • hourHandColor (Color): 时针的颜色。
  • minuteHandStrokeCap (StrokeCap): 分针的笔帽样式（例如，StrokeCap.round、StrokeCap.square、StrokeCap.butt）。
  • hourHandStrokeCap (StrokeCap): 时针的笔帽样式。

构造函数

  • AnimatedClockIndicatorOptions(): 默认构造函数，具有可选参数。
  • AnimatedClockIndicatorOptions.withUniformColor({Color color, ...}): 将相同的颜色应用于边框、分针和时针。
  • AnimatedClockIndicatorOptions.withCustomColor({Color borderColor, Color minuteHandColor, Color hourHandColor, ...}): 允许你分别为时钟的各个部分指定不同的颜色。

示例应用

下面是一个完整的示例，展示了如何使用AnimatedClockIndicator。该示例反映了上面GIF中所示的结果，并展示了该小部件的灵活性，包括隐藏时针的功能。

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Animated Clock Indicator Examples',
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // 标题和示例1：默认设置的最小时钟
              Text(
                '默认时钟',
                style:
                    TextStyle(fontWeight: FontWeight.bold, color: Colors.black),
              ),
              SizedBox(height: 8),
              SizedBox(
                width: 80.0,
                height: 80.0,
                child: AnimatedClockIndicator(
                  options: AnimatedClockIndicatorOptions(),
                ),
              ),
              SizedBox(height: 20),

              // 标题和示例2：带有黄金分割比例长度、不同颜色和更快的分钟旋转的自定义时钟
              Text(
                '自定义时钟',
                style:
                    TextStyle(fontWeight: FontWeight.bold, color: Colors.black),
              ),
              SizedBox(height: 8),
              SizedBox(
                width: 100.0,
                height: 100.0,
                child: AnimatedClockIndicator(
                  options: AnimatedClockIndicatorOptions(
                    borderWidth: 3.0,
                    minuteHandWidth: 2.5,
                    hourHandWidth: 3.0,
                    handInset: 3.0,
                    clockHandsLengthRatio: 0.618,
                    minuteHandRotationDuration: Duration(milliseconds: 800),
                    minuteToHourRotationRatio: 12.0,
                    borderColor: Colors.orange,
                    minuteHandColor: Colors.deepOrange,
                    hourHandColor: Colors.orangeAccent,
                  ),
                ),
              ),
              SizedBox(height: 20),

              // 标题和示例3：统一颜色的时钟，所有元素自定义笔宽
              Text(
                '统一颜色的时钟',
                style:
                    TextStyle(fontWeight: FontWeight.bold, color: Colors.black),
              ),
              SizedBox(height: 8),
              SizedBox(
                width: 120.0,
                height: 120.0,
                child: AnimatedClockIndicator(
                  options: AnimatedClockIndicatorOptions.withUniformColor(
                    color: Colors.blue,
                    borderWidth: 4.0,
                    minuteHandWidth: 2.5,
                    hourHandWidth: 3.0,
                    handInset: 3.0,
                    minuteHandRotationDuration: Duration(milliseconds: 1000),
                  ),
                ),
              ),
              SizedBox(height: 20),

              // 标题和示例4：带有不同笔帽样式的小时和分钟指针的时钟
              Text(
                '带有不同笔帽样式的时钟',
                style:
                    TextStyle(fontWeight: FontWeight.bold, color: Colors.black),
              ),
              SizedBox(height: 8),
              SizedBox(
                width: 140.0,
                height: 140.0,
                child: AnimatedClockIndicator(
                  options: AnimatedClockIndicatorOptions(
                    borderWidth: 3.5,
                    minuteHandWidth: 3.0,
                    hourHandWidth: 4.0,
                    handInset: 2.5,
                    clockHandsLengthRatio: 0.75,
                    minuteHandRotationDuration: Duration(milliseconds: 900),
                    borderColor: Colors.red,
                    minuteHandColor: Colors.blue,
                    hourHandColor: Colors.green,
                    minuteHandStrokeCap: StrokeCap.butt,
                    hourHandStrokeCap: StrokeCap.square,
                  ),
                ),
              ),
              SizedBox(height: 20),

              // 标题和示例5：没有时针的时钟（clockHandsLengthRatio 设置为0）
              Text(
                '没有时针的时钟',
                style:
                    TextStyle(fontWeight: FontWeight.bold, color: Colors.black),
              ),
              SizedBox(height: 8),
              SizedBox(
                width: 160.0,
                height: 160.0,
                child: AnimatedClockIndicator(
                  options: AnimatedClockIndicatorOptions(
                    borderWidth: 4.0,
                    minuteHandWidth: 3.0,
                    hourHandWidth: 3.0,
                    handInset: 4.0,
                    clockHandsLengthRatio: 0,
                    // 只有分针可见
                    minuteHandRotationDuration: Duration(milliseconds: 700),
                    borderColor: Colors.green,
                    minuteHandColor: Colors.lightGreen,
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

更多关于Flutter动画时钟指示器插件animated_clock_indicator的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter动画时钟指示器插件animated_clock_indicator的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是一个关于如何在Flutter项目中使用animated_clock_indicator插件的代码示例。这个插件可以用来创建一个动画时钟指示器，非常适合用于显示倒计时或时间进度等场景。

首先，确保你已经在pubspec.yaml文件中添加了animated_clock_indicator依赖：

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

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

接下来，在你的Dart文件中，你可以使用AnimatedClockIndicator来创建一个动画时钟指示器。以下是一个完整的示例代码：

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

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

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

class ClockIndicatorScreen extends StatefulWidget {
  @override
  _ClockIndicatorScreenState createState() => _ClockIndicatorScreenState();
}

class _ClockIndicatorScreenState extends State<ClockIndicatorScreen> with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    // 初始化动画控制器，持续时间为60秒（1分钟）
    _controller = AnimationController(
      duration: const Duration(seconds: 60),
      vsync: this,
    )..repeat(reverse: true);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Animated Clock Indicator Demo'),
      ),
      body: Center(
        child: AnimatedClockIndicator(
          // 使用动画控制器的值
          value: _controller.value,
          // 自定义指针颜色
          handColors: [
            Colors.red,
            Colors.blue,
            Colors.green,
          ],
          // 自定义背景颜色
          backgroundColor: Colors.grey[200]!,
          // 自定义圆盘的宽度
          circleWidth: 8.0,
          // 自定义指针的长度比例
          handLengthFactor: 0.6,
          // 自定义指针之间的角度间隔
          angleSpacingFactor: 6.0,
          // 自定义动画的速度
          animationCurve: Curves.easeInOut,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 重置动画控制器
          _controller.reset();
          // 开始动画
          _controller.forward();
        },
        tooltip: 'Restart',
        child: Icon(Icons.replay),
      ),
    );
  }
}

解释

  1. 依赖添加：确保在pubspec.yaml文件中添加了animated_clock_indicator依赖。
  2. 动画控制器：使用AnimationController来控制动画。在这个例子中，动画的持续时间设置为60秒，并且设置为反复播放（_controller.repeat(reverse: true)）。
  3. AnimatedClockIndicator：在AnimatedClockIndicator中使用动画控制器的值（_controller.value）。你可以自定义指针颜色、背景颜色、圆盘宽度、指针长度比例、指针之间的角度间隔以及动画曲线等属性。
  4. 重置和开始动画：通过点击浮动操作按钮（FAB），可以重置并重新开始动画。

这个示例展示了如何使用animated_clock_indicator插件创建一个简单的动画时钟指示器，并且提供了基本的自定义选项。你可以根据需要进一步调整和扩展这个示例。

回到顶部