Flutter计时器功能插件pie_timer的使用

简介

pie_timer 是一个用于在 Flutter 中实现带有饼状动画的计时器的自定义化插件。该插件可以渲染一个圆形倒计时计时器，并且支持饼状进度的动画效果。

预览

功能特性

• 支持倒计时任意时长。
• 可以设置进度方向（顺时针或逆时针）。
• 提供可自定义的颜色、宽度、半径、阴影和文本样式。
• 提供回调函数，当动画完成或取消时触发。
• 提供回调函数，用于开始、停止和重置动画。
• 支持通过 AnimationController 控制动画。
• 内置手势检测器，点击切换播放与暂停，长按重置动画。

PieTimer 参数

使用步骤

1. 添加依赖

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

dependencies:
  pie_timer: ^最新版本号

然后运行以下命令安装依赖：

flutter pub get

2. 使用示例

示例 1：不使用 PieAnimationController

PieTimer(
  duration: const Duration(seconds: 10), // 倒计时时长
  countdownPassed: const Duration(seconds: 6), // 已经过的时间
  radius: 150, // 饼图半径
  fillColor: Colors.red, // 进度颜色
  pieColor: Colors.black, // 背景颜色
  borderColor: Colors.yellow, // 边框颜色
  borderWidth: 15, // 边框宽度
  shadowColor: Colors.black, // 阴影颜色
  shadowElevation: 10.0, // 阴影高度
  textStyle: const TextStyle( // 文本样式
    color: Colors.white,
    fontSize: 40,
    fontWeight: FontWeight.bold,
  ),
  isReverse: false, // 是否反向（顺时针）
  onCompleted: () => {}, // 动画完成回调
  onDismissed: () => {}, // 动画取消回调
  enableTouchControls: true, // 启用触摸控制
)

示例 2：使用 PieAnimationController

以下是一个完整的示例代码，展示了如何使用 PieAnimationController 来控制动画。

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Pie Timer',
      theme: ThemeData.dark(),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('PieTimer'),
        ),
        body: const PieWidget(),
      ),
    );
  }
}

class PieWidget extends StatefulWidget {
  const PieWidget({Key? key}) : super(key: key);

  [@override](/user/override)
  State<PieWidget> createState() => _PieWidgetState();
}

class _PieWidgetState extends State<PieWidget>
    with SingleTickerProviderStateMixin {
  late PieAnimationController _pieAnimationController;

  [@override](/user/override)
  void initState() {
    super.initState();
    _pieAnimationController = PieAnimationController(vsync: this);
  }

  [@override](/user/override)
  void dispose() {
    _pieAnimationController.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        PieTimer(
          pieAnimationController: _pieAnimationController, // 使用 PieAnimationController
          duration: const Duration(seconds: 10), // 倒计时时长
          countdownPassed: const Duration(seconds: 6), // 已经过的时间
          radius: 150, // 饼图半径
          fillColor: Colors.red, // 进度颜色
          pieColor: Colors.black, // 背景颜色
          borderColor: Colors.yellow, // 边框颜色
          borderWidth: 15, // 边框宽度
          shadowColor: Colors.black, // 阴影颜色
          shadowElevation: 10.0, // 阴影高度
          textStyle: const TextStyle( // 文本样式
            color: Colors.white,
            fontSize: 40,
            fontWeight: FontWeight.bold,
          ),
          isReverse: false, // 是否反向（顺时针）
          onCompleted: () => {}, // 动画完成回调
          onDismissed: () => {}, // 动画取消回调
          enableTouchControls: true, // 启用触摸控制
        ),
        const SizedBox(height: 100),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            IconButton(
              icon: const Icon(Icons.pause), // 暂停按钮
              onPressed: () {
                _pieAnimationController.stopAnim?.call(); // 停止动画
              },
            ),
            IconButton(
              icon: const Icon(Icons.play_arrow), // 播放按钮
              onPressed: () {
                _pieAnimationController.startAnim?.call(); // 开始动画
              },
            ),
            IconButton(
              icon: const Icon(Icons.replay), // 重置按钮
              onPressed: () {
                _pieAnimationController.resetAnim?.call(); // 重置动画
              },
            ),
          ],
        ),
      ],
    );
  }
}