Flutter倒计时插件simple_count_down_timer的使用

发布于 1周前 作者 ionicwang 来自 Flutter

Flutter倒计时插件simple_count_down_timer的使用

这是一个使用Flutter构建的简单倒计时小部件。它会显示到指定结束日期和时间的剩余时间，并在倒计时结束后触发回调函数。

特性

  • 显示剩余时间（天、小时、分钟、秒）。
  • 可自定义文本样式和颜色。
  • 倒计时结束时触发回调函数。
  • 轻量且易于使用。

安装

  1. 在你的pubspec.yaml文件中添加依赖项：
dependencies:
  simple_count_down_timer: ^1.0.4 # 替换为最新版本
  1. 运行flutter pub get以安装该包。

使用

以下是一个简单的使用示例：

import 'package:flutter/material.dart';
import 'package:simple_count_down_timer/simple_count_down_timer.dart' as timer;

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

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  void initState() {
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('插件示例应用'),
        ),
        body: Center(
          child: timer.SimpleCountDownTimer(
            duration: const Duration(days: 1, seconds: 5), // 设置倒计时时间为1天5秒
            animationStyle: timer.AnimationStyle.fadeIn, // 设置动画风格为淡入
          ),
        ),
      ),
    );
  }
}

更多关于Flutter倒计时插件simple_count_down_timer的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter倒计时插件simple_count_down_timer的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用simple_count_down_timer插件的一个示例代码案例。

首先，确保你已经在pubspec.yaml文件中添加了simple_count_down_timer依赖：

dependencies:
  flutter:
    sdk: flutter
  simple_count_down_timer: ^x.y.z  # 请将x.y.z替换为实际的版本号

然后运行flutter pub get来安装依赖。

接下来，你可以在你的Flutter应用中使用这个插件。以下是一个简单的示例，展示了如何使用simple_count_down_timer来创建一个倒计时功能：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Countdown Timer Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: CountdownTimerScreen(),
    );
  }
}

class CountdownTimerScreen extends StatefulWidget {
  @override
  _CountdownTimerScreenState createState() => _CountdownTimerScreenState();
}

class _CountdownTimerScreenState extends State<CountdownTimerScreen> {
  CountdownController _controller;

  @override
  void initState() {
    super.initState();
    // 初始化倒计时控制器，设置初始时间为60秒
    _controller = CountdownController(
      duration: 60,
      interval: 1,
    );

    // 监听倒计时结束事件
    _controller.onCompleted.listen((event) {
      print('倒计时结束');
      // 在这里你可以添加倒计时结束后的处理逻辑，比如显示一个消息或者重置倒计时
    });

    // 监听倒计时每一秒更新事件
    _controller.onTick.listen((remainingTime) {
      print('剩余时间: $remainingTime 秒');
      // 更新UI等操作可以放在这里
      setState(() {}); // 如果需要更新UI，可以调用setState来触发重绘
    });

    // 开始倒计时
    _controller.start();
  }

  @override
  void dispose() {
    // 释放资源
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Countdown Timer Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '剩余时间: ${_controller.remainingTime} 秒',
              style: TextStyle(fontSize: 24),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                if (_controller.isRunning) {
                  _controller.pause();
                } else {
                  _controller.resume();
                }
              },
              child: Text(_controller.isRunning ? '暂停' : '继续'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                _controller.reset();
              },
              child: Text('重置'),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的倒计时应用，其中：

  1. 我们使用CountdownController来管理倒计时逻辑。
  2. 初始化了倒计时为60秒，并设置了每秒更新一次。
  3. 监听了倒计时结束和每秒更新的事件。
  4. 在UI中显示剩余时间，并提供了暂停、继续和重置倒计时的按钮。

你可以根据具体需求进一步定制和扩展这个示例。

回到顶部