Flutter倒计时插件simple_timer_count_down的使用

SimpleTimerCountDown 是一个用于Flutter应用的可定制倒计时插件。它允许你轻松实现倒计时功能，并支持灵活的时间间隔、回调函数和自定义UI渲染。

特性

• 可定制的持续时间和间隔：指定总的倒计时时间和更新间隔。
• 回调函数：
  • onStarted: 当倒计时开始时触发。
  • onFinished: 当倒计时结束时触发。
  • onChange: 提供每个间隔剩余的时间。
• 自定义UI渲染：使用builder函数根据剩余时间创建动态UI。
• 生命周期管理：当小部件被销毁时自动清理定时器。

安装

在你的 pubspec.yaml 文件中添加以下内容：

dependencies:
  count_down_timer: ^<latest_version>

然后运行以下命令：

flutter pub get

请确保将 <latest_version> 替换为最新的版本号。

使用方法

以下是一个基本的示例，展示如何使用 SimpleTimerCountDown：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('SimpleTimerCountDown Example')),
        body: Center(
          child: SimpleTimerCountDown(
            duration: Duration(seconds: 10),
            onStarted: () => print('Timer started!'),
            onFinished: () => print('Timer finished!'),
            onChange: (time) => print('Time remaining: $time'),
            builder: (context, remainingTime) {
              return Text(
                remainingTime.inSeconds.toString(),
                style: TextStyle(fontSize: 48),
              );
            },
          ),
        ),
      ),
    );
  }
}

属性说明

示例UI

你可以使用 builder 属性来创建动态UI：

builder: (context, remainingTime) {
  return Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Text('Time Remaining:', style: TextStyle(fontSize: 20)),
      Text(
        '${remainingTime.inSeconds}s',
        style: TextStyle(fontSize: 48, fontWeight: FontWeight.bold),
      ),
    ],
  );
},

完整示例代码

下面是一个更完整的示例，展示了如何在实际项目中使用 SimpleTimerCountDown：

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Simple Timer Countdown Example',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Simple Timer Countdown Example')),
      body: Center(
        child: SimpleTimerCountDown(
          duration: const Duration(seconds: 10), // 设置倒计时总时间
          interval: const Duration(seconds: 1), // 设置更新间隔
          onStarted: () => print('Timer started!'), // 倒计时开始时的回调
          onFinished: () => print('Timer finished!'), // 倒计时结束时的回调
          onChange: (time) => print('Time remaining: $time'), // 每个间隔的回调
          builder: (context, time) {
            // 根据倒计时的当前状态自定义UI
            return Text(
              '${time.inSeconds} seconds remaining',
              style: const TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
            );
          },
        ),
      ),
    );
  }
}