插件详情v4.1.0

flutter_countdown_timer

一个 Flutter 倒计时器。[10 天 5:30:46] ⬇⬇⬇⬇

AndroidiOSWebmacOSWindowsLinux

pub.dev API 文档源代码

近 30 天下载: 2.8万
喜欢数: 315
Pub 分数: 130

安装插件

flutter pub add flutter_countdown_timer

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

一个 Flutter 包，提供可自定义的倒计时计时器小部件，以 '10 天 5:30:46' 等格式显示时间。支持 Android、iOS、Web、macOS、Windows 和 Linux 等多个平台。非常适合需要限时事件的应用程序，例如拍卖、测验或提醒。该计时器可以编程方式暂停、恢复和重置。它与 Flutter 的 UI 系统无缝集成，并提供灵活的显示时间样式选项。

适合场景

事件倒计时
测验计时器
拍卖倒计时
提醒系统
游戏计时器

主要特点

可自定义的时间格式
暂停/恢复功能
跨平台支持
样式选项
程序化控制

适合对象

时间敏感的应用功能
交互式 UI 组件
教育类应用
电子商务计时器

使用建议

需要手动处理计时器到期
有限的内置动画效果
无原生系统闹钟集成
依赖准确的设备时间
未针对非常长的持续时间进行优化

原始 README

以下为关联源码仓库的 README 原文快照，最新内容请访问源码仓库。

CountdownTimer

A simple flutter countdown timer widget.Count down through the end timestamp,Trigger an event after the countdown ends.

Installing

Add this to your package's pubspec.yaml file:

dependencies:
  flutter_countdown_timer: ^4.1.0

Install it

$ flutter pub get

CountdownTimer

name	description
endWidget	The widget displayed at the end of the countdown
widgetBuilder	Widget Function(BuildContext context, CurrentRemainingTime time)
controller	CountdownTimer start and dispose controller
endTime	Countdown end time stamp
onEnd	Countdown end event
textStyle	Text color

CountdownTimerController

name	description
endTime	Countdown end time stamp
onEnd	Countdown end event

Example

Simple to use

int endTime = DateTime.now().millisecondsSinceEpoch + 1000 * 30;

...
CountdownTimer(
  endTime: endTime,
),

Execute event at end.

int endTime = DateTime.now().millisecondsSinceEpoch + 1000 * 30;

void onEnd() {
  print('onEnd');
}

...
CountdownTimer(
  endTime: endTime,
  onEnd: onEnd,
),

Use the controller to end the countdown early.

  CountdownTimerController controller;
  int endTime = DateTime.now().millisecondsSinceEpoch + 1000 * 30;

  @override
  void initState() {
    super.initState();
    controller = CountdownTimerController(endTime: endTime, onEnd: onEnd);
  }

  void onEnd() {
    print('onEnd');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
          CountdownTimer(
              controller: controller,
              onEnd: onEnd,
              endTime: endTime,
          ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.stop),
        onPressed: () {
          onEnd();
          controller.disposeTimer();
        },
      ),
    );
  }

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

Custom style.

  int endTime = DateTime.now().millisecondsSinceEpoch + 1000 * 30;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
          CountdownTimer(
            endTime: endTime,
            widgetBuilder: (_, CurrentRemainingTime time) {
              if (time == null) {
                return Text('Game over');
              }
              return Text(
                  'days: [ ${time.days} ], hours: [ ${time.hours} ], min: [ ${time.min} ], sec: [ ${time.sec} ]');
            },
          ),
      ),
    );
  }

Using millisecond animation

class _CountdownTimerPageState extends State<CountdownTimerPage>
    with SingleTickerProviderStateMixin {
  late CountdownTimerController controller;
  int endTime = DateTime.now().millisecondsSinceEpoch +
      Duration(seconds: 30).inMilliseconds;

  @override
  void initState() {
    super.initState();
    controller =
        CountdownTimerController(endTime: endTime, onEnd: onEnd, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          CountdownTimer(
            controller: controller,
            widgetBuilder: (BuildContext context, CurrentRemainingTime? time) {
              if (time == null) {
                return Text('Game over');
              }
              List<Widget> list = [];
              if (time.sec != null) {
                list.add(Row(
                  children: <Widget>[
                    Icon(Icons.sentiment_very_satisfied),
                    Text(time.sec.toString()),
                  ],
                ));
              }
              if (time.milliseconds != null) {
                list.add(Row(
                  children: <Widget>[
                    Icon(Icons.sentiment_very_satisfied),
                    AnimatedBuilder(
                      animation: time.milliseconds!,
                      builder: (context, child) {
                        return Text("${(time.milliseconds!.value * 1000).toInt()}");
                      },
                    )
                  ],
                ));
              }
              return Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: list,
              );
            },
          ),
        ],
      ),
    );
  }

}

In ListView.builder

class ListViewPage extends StatefulWidget {
  static final String rName = "ListView";

  @override
  _ListViewPageState createState() => _ListViewPageState();
}

class _ListViewPageState extends State<ListViewPage> {
  int endTime = DateTime.now().millisecondsSinceEpoch + 1000 * 60 * 60;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        itemCount: 200,
        itemBuilder: (context, index) {
          if (index == 0) {
            return _CountdownDemo(endTime);
          } else {
            return Container(
              height: 200,
              color: Colors.blue,
              margin: EdgeInsets.all(10),
            );
          }
        },
      ),
    );
  }
}

class _CountdownDemo extends StatefulWidget {
  final int endTime;

  _CountdownDemo(this.endTime);

  @override
  __CountdownDemoState createState() => __CountdownDemoState();
}

class __CountdownDemoState extends State<_CountdownDemo> {
  CountdownTimerController countdownTimerController;

  @override
  Widget build(BuildContext context) {
    return CountdownTimer(
      controller: countdownTimerController,
    );
  }

  @override
  void initState() {
    super.initState();
    countdownTimerController =
        CountdownTimerController(endTime: widget.endTime);
  }
}

Countdown

CountdownController countdownController = CountdownController(duration: Duration(minutes: 1));


Scaffold(
      body: Center(
        child: Countdown(countdownController: countdownController),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(countdownController.isRunning ? Icons.stop : Icons.play_arrow),
        onPressed: () {
          if(!countdownController.isRunning) {
          ///start
            countdownController.start();
          } else {
          ///pause
            countdownController.stop();
          }
          setState(() {
            ///change icon
          });
        },
      ),
    )