自定义计时器

一个高度可定制的计时器构建器，具有控制器、动画、间隔、回调、自定义操作等！

Custom-Timer

? 简单用法

@override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text("CustomTimer example"),
        ),
        body: Center(
          child: CustomTimer(
            from: Duration(hours: 12),
            to: Duration(hours: 0),
            onBuildAction: CustomTimerAction.auto_start,
            builder: (CustomTimerRemainingTime remaining) {
              return Text(
                "${remaining.hours}:${remaining.minutes}:${remaining.seconds}",
                style: TextStyle(fontSize: 30.0),
              );
            },
          ),
        ),
      ),
    );
  }

? 自定义用法

允许更多控制的选项

属性 类型 描述
从 持续时间 计时器的开始。
to 持续时间 计时器的结束。
间隔 持续时间 更新小部件的时间间隔。
默认间隔为 Duration(seconds: 1)。
控制器 CustomTimerController 控制计时器的状态。
onBuildAction CustomTimerAction 在小部件首次构建时执行操作。
默认操作为 CustomTimerAction.go_to_start。
onFinishAction CustomTimerAction 计时器完成时执行操作。
默认操作为 CustomTimerAction.go_to_end。
onResetAction CustomTimerAction 计时器重置时执行操作。
默认操作为 CustomTimerAction.go_to_start。
builder Widget Function(CustomTimerRemainingTime) 构建自定义小部件的函数，允许获取计时器的剩余时间。
finishedBuilder Widget Function(CustomTimerRemainingTime) 构建自定义小部件的函数，仅在计时器完成时允许获取剩余时间。
如果使用它，它将替换 builder。
pausedBuilder Widget Function(CustomTimerRemainingTime) 构建自定义小部件的函数，仅在计时器暂停时允许获取剩余时间。
如果使用它，它将替换 builder。
resetBuilder Widget Function(CustomTimerRemainingTime) 构建自定义小部件的函数，仅在计时器重置时允许获取剩余时间。
如果使用它，它将替换 builder。
onStart VoidCallback 计时器开始时运行的回调函数。
onFinish VoidCallback 计时器完成时运行的回调函数。
onPaused VoidCallback 计时器暂停时运行的回调函数。
onReset VoidCallback 计时器重置时运行的回调函数。
onChangeState Function(CustomTimerState) 计时器状态更改时运行的回调函数。返回一个 CustomTimerState，允许您获取状态并创建自定义函数或条件。
onChangeStateAnimation AnimatedSwitcher 计时器状态更改时运行的动画。无需定义子项，因为它将被当前构建器替换。

CustomTimerAction 操作

操作 描述
CustomTimerAction.go_to_start 显示计时器的开始。
CustomTimerAction.go_to_end 显示计时器的结束。
CustomTimerAction.auto_start 自动启动计时器。

CustomTimerRemainingTime 属性

属性 描述
天 包含剩余天数的字符串。
小时 包含剩余小时数的字符串。
hoursWithoutFill 包含剩余小时数的字符串，仅在必要时显示两位数。
分钟 包含剩余分钟数的字符串。
minutesWithoutFill 包含剩余分钟数的字符串，仅在必要时显示两位数。
秒 包含剩余秒数的字符串。
secondsWithoutFill 包含剩余秒数的字符串，仅在必要时显示两位数。
毫秒 包含剩余毫秒数的字符串。
duration 一个默认的 Duration，包含剩余时间。
允许您创建更具体的函数或条件，但请记住，它可能返回超过 59 分钟和秒，以及超过 1000 毫秒。

CustomTimerState 状态

状态
CustomTimerState.reset
CustomTimerState.counting
CustomTimerState.paused
CustomTimerState.finished

您可以通过 onChangeState 回调函数或使用 CustomTimerController 访问计时器状态。


例如

CustomTimerState state = _controller.state;

? 使用 CustomTimerController

  final CustomTimerController _controller = new CustomTimerController();

  @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,
              from: Duration(hours: 12),
              to: Duration(hours: 0),
              builder: (CustomTimerRemainingTime remaining) {
                return Text(
                  "${remaining.hours}:${remaining.minutes}:${remaining.seconds}",
                  style: TextStyle(fontSize: 30.0),
                );
              },
            ),
            SizedBox(height: 16.0,),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                FlatButton(
                  child: Text("Start"),
                  onPressed: () => _controller.start(),
                  color: Colors.green,
                ),
                FlatButton(
                  child: Text("Pause"),
                  onPressed: () => _controller.pause(),
                  color: Colors.blue,
                ),
                FlatButton(
                  child: Text("Reset"),
                  onPressed: () => _controller.reset(),
                  color: Colors.red
                ),
              ],
            )
          ],
        ),
      ),
    );
  }

CustomTimerController 属性

属性 权限 描述
state 读取 返回计时器的当前状态。

CustomTimerController 方法

方法 描述
start() 启动或恢复计时器。
pause() 暂停计时器。
reset() 重置计时器。
如果您想重新启动计时器，可以调用控制器 start() 方法或将 onResetAction 属性设置为 CustomTimerAction.auto_start。

⚙️ 安装

将此添加到您的 package 的 pubspec.yaml 文件中

dependencies:
  custom_timer: ^0.0.2

安装它

$ flutter pub get

将包导入到您的项目中

import 'package:custom_timer/custom_timer.dart';

GitHub

https://github.com/federicodesia/custom_timer