Flutter自定义计时器插件custom_timer的使用

Custom Timer ⌛

custom_timer 是一个Flutter包，用于创建可定制化的计时器。

🎉 Features

• 计时器控制器
• 自动倒计时/正计时
• 自定义构建器
• 毫秒级支持

🔧 Installation

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

dependencies:
  custom_timer: ^0.2.3

然后安装它：

$ flutter pub get

接下来，在你的项目中导入该包：

import 'package:custom_timer/custom_timer.dart';

📌 Usage

示例代码

下面是一个完整的示例demo，展示了如何使用 custom_timer 包来创建一个可交互的计时器应用。

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

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
  late CustomTimerController _controller = CustomTimerController(
    vsync: this,
    begin: Duration(seconds: 1),
    end: Duration(seconds: 12),
    initialState: CustomTimerState.reset,
    interval: CustomTimerInterval.milliseconds
  );

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text("CustomTimer example"),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            CustomTimer(
                controller: _controller,
                builder: (state, remaining) {
                  // Build the widget you want!
                  return Column(
                    children: [
                      Text("${state.name}", style: TextStyle(fontSize: 24.0)),
                      Text(
                          "${remaining.hours}:${remaining.minutes}:${remaining.seconds}.${remaining.milliseconds}",
                          style: TextStyle(fontSize: 24.0))
                    ],
                  );
                }),
            SizedBox(height: 24.0),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                RoundedButton(
                  text: "Start",
                  color: Colors.green,
                  onPressed: () => _controller.start(),
                ),
                RoundedButton(
                  text: "Pause",
                  color: Colors.blue,
                  onPressed: () => _controller.pause(),
                ),
                RoundedButton(
                  text: "Reset",
                  color: Colors.red,
                  onPressed: () => _controller.reset(),
                )
              ],
            ),
            SizedBox(height: 12.0),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                RoundedButton(
                  text: "Set Begin to 5s",
                  color: Colors.purple,
                  onPressed: () => _controller.begin = Duration(seconds: 5),
                ),
                RoundedButton(
                  text: "Set End to 5s",
                  color: Colors.purple,
                  onPressed: () => _controller.end = Duration(seconds: 5),
                ),
              ],
            ),
            SizedBox(height: 12.0),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                RoundedButton(
                  text: "Jump to 5s",
                  color: Colors.indigo,
                  onPressed: () => _controller.jumpTo(Duration(seconds: 5)),
                ),
                RoundedButton(
                  text: "Finish",
                  color: Colors.orange,
                  onPressed: () => _controller.finish(),
                )
              ],
            ),
            SizedBox(height: 12.0),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                RoundedButton(
                  text: "Add 5s",
                  color: Colors.teal,
                  onPressed: () => _controller.add(Duration(seconds: 5)),
                ),
                RoundedButton(
                  text: "Subtract 5s",
                  color: Colors.teal,
                  onPressed: () => _controller.subtract(Duration(seconds: 5)),
                )
              ],
            )
          ],
        ),
      ),
    );
  }
}

class RoundedButton extends StatelessWidget {
  final String text;
  final Color color;
  final void Function()? onPressed;

  RoundedButton({required this.text, required this.color, this.onPressed});

  @override
  Widget build(BuildContext context) {
    return TextButton(
      child: Text(text, style: TextStyle(color: Colors.white)),
      style: TextButton.styleFrom(
        backgroundColor: color,
        padding: EdgeInsets.symmetric(vertical: 12.0, horizontal: 24.0),
        shape:
            RoundedRectangleBorder(borderRadius: BorderRadius.circular(12.0)),
      ),
      onPressed: onPressed,
    );
  }
}

解释

1. 引入依赖：确保你已经在项目的 pubspec.yaml 中添加了 custom_timer 的依赖，并且已经执行了 flutter pub get 来获取这个包。
2. 创建计时器控制器：通过 CustomTimerController 创建一个计时器控制器实例。这里我们指定了开始时间、结束时间、初始状态和时间间隔。
3. 构建UI：使用 CustomTimer 小部件，根据计时器的状态和剩余时间来构建UI。这里我们将计时器的状态名称和格式化后的时间显示出来。
4. 控制按钮：提供了多个按钮来控制计时器的行为，如开始、暂停、重置等。每个按钮绑定了一个操作到 _controller 上。
5. 处理生命周期：在 dispose 方法中释放计时器控制器，以避免内存泄漏。

这样，你就完成了一个简单的计时器应用。你可以根据需要调整计时器的参数和UI设计，来满足不同的应用场景。