Flutter倒计时功能插件count_down_time的使用

count_down_time 是一个简单的Flutter插件，用于实现倒计时功能。它提供了多种方式来初始化倒计时（如秒、分钟和小时），并且支持自定义样式和回调函数。

示例效果

开始使用

安装插件

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

dependencies:
  count_down_time: ^latest_version

然后运行 flutter pub get 来安装插件。

基本示例

以下是一个基本的使用示例：

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

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

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool timeoutReached = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Count Down Time Demo'),
        ),
        body: Column(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            CountDownTime(
              timeId: 'simple-timer',
              timeStartInSeconds: 30,
              onChangeTime: (time) {
                setState(() {
                  timeoutReached = false;
                });
              },
              onTimeOut: () {
                setState(() {
                  timeoutReached = true;
                });
              },
            ),
            Container(
              padding: const EdgeInsets.only(top: 10),
              alignment: Alignment.center,
              child: ElevatedButton(
                child: const Text('Restart count'),
                onPressed: () {
                  CountDownTimeController.pushTimerRenewId('simple-timer');
                },
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(top: 10),
              child: Text(timeoutReached ? 'Timeout Reached' : ''),
            ),
          ],
        ),
      ),
    );
  }
}

属性说明

工厂方法

该插件还提供了工厂方法来处理以分钟或小时为单位的倒计时：

分钟倒计时

CountDownTime.minutes(
  timeStartInMinutes: 2,
)

小时倒计时

CountDownTime.hours(
  timeStartInHours: 2,
)

完整示例

下面是一个完整的示例，展示了如何使用不同的时间单位来启动倒计时，并且可以重新启动倒计时：

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

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

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

  @override
  State<CountDownTimeAppDemo> createState() => _CountDownTimeAppDemoState();
}

class _CountDownTimeAppDemoState extends State<CountDownTimeAppDemo> {
  bool timeoutReached = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Count Down Time Demo'),
        ),
        body: Container(
          padding: const EdgeInsets.all(15),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.center,
            mainAxisSize: MainAxisSize.max,
            children: [
              const CountDownTime(
                textStyle: TextStyle(color: Colors.red, fontSize: 35),
                timeStartInSeconds: 30,
                onTimeOut: () {
                  print("Time out reached");
                },
              ),
              CountDownTime.minutes(
                textStyle: const TextStyle(color: Colors.blue, fontSize: 35),
                timeStartInMinutes: 2,
                onTimeOut: () {
                  print("Minute timer finished");
                },
              ),
              CountDownTime.hours(
                textStyle: const TextStyle(color: Colors.green, fontSize: 35),
                timeStartInHours: 2,
                onTimeOut: () {
                  print("Hour timer finished");
                },
              ),
              Container(
                padding: const EdgeInsets.only(top: 10),
                alignment: Alignment.center,
                child: ElevatedButton(
                  child: const Text('Restart all timers'),
                  onPressed: () {
                    CountDownTimeController.pushTimerRenewId('simple-timer');
                  },
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

以上就是关于 count_down_time 插件的基本使用方法。你可以根据自己的需求调整倒计时的时间和样式，并在倒计时结束后执行相应的操作。