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

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

A simple countdown plugin for flutter ⌛

gif

开始使用

此项目是一个用于 Flutter 的插件包起点， 这是一个专门的包，包含针对 Android 和/或 iOS 的平台特定实现代码。

有关如何开始使用 Flutter 的帮助，请查看我们的 在线文档，其中提供了教程、示例、移动开发指南以及完整的 API 参考。

使用方法

倒计时 Countdown

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

class Foo extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(
      child: Countdown(
        duration: Duration(seconds: 10), // 设置倒计时时间为10秒
        onFinish: () { // 倒计时结束时执行的回调函数
          print('finished!');
        },
        builder: (BuildContext ctx, Duration remaining) { // 构建剩余时间的显示方式
            return Text('${remaining.inMinutes}:${remaining.inSeconds}');
        },
      ),
    );
  }
}

带格式的倒计时 CountdownFormatted

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

class Foo extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(
      child: CountdownFormatted(
        duration: Duration(hours: 1), // 设置倒计时时间为1小时
        builder: (BuildContext ctx, String remaining) { // 构建剩余时间的显示方式
          return Text(remaining); // 显示格式为 01:00:00
        },
      ),
    );
  }
}

完整示例 Demo

以下是一个完整的示例代码，展示如何在 Flutter 应用中使用 countdown_flutter 插件：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:countdown_flutter/countdown_flutter.dart';

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

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  var _done = false;

  [@override](/user/override)
  void initState() {
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text(_done ? '完成！' : '倒计时中...'), // 根据倒计时状态动态改变标题
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: <Widget>[
            Center(
              child: CountdownFormatted(
                duration: Duration(hours: 2), // 设置倒计时时间为2小时
                builder: (BuildContext ctx, String remaining) {
                  return Text(
                    remaining, // 显示格式为 02:00:00
                    style: TextStyle(fontSize: 30),
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

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

1 回复

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


countdown_flutter 是一个用于在 Flutter 应用中实现倒计时功能的插件。它提供了一个简单易用的 API，可以帮助你快速实现倒计时功能。以下是如何使用 countdown_flutter 插件的步骤：

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  countdown_flutter: ^0.1.0  # 请检查最新版本

然后运行 flutter pub get 来获取依赖。

2. 导入包

在你的 Dart 文件中导入 countdown_flutter 包：

import 'package:countdown_flutter/countdown_flutter.dart';

3. 使用 Countdown 组件

Countdown 组件是 countdown_flutter 提供的核心组件，你可以通过它来实现倒计时功能。以下是一个简单的示例：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Countdown Example'),
        ),
        body: Center(
          child: Countdown(
            duration: Duration(seconds: 10),
            onFinish: () {
              print('Countdown finished!');
            },
            builder: (BuildContext context, Duration remaining) {
              return Text(
                '${remaining.inSeconds} seconds remaining',
                style: TextStyle(fontSize: 24),
              );
            },
          ),
        ),
      ),
    );
  }
}

4. 参数说明

  • duration: 倒计时的总时长，类型为 Duration。
  • onFinish: 倒计时结束时触发的回调函数。
  • builder: 用于构建倒计时显示的 UI，接收 BuildContext 和 Duration 两个参数，Duration 表示剩余的倒计时时间。

5. 自定义倒计时样式

你可以通过 builder 参数来自定义倒计时的显示样式。例如，你可以将剩余时间格式化为分钟和秒：

builder: (BuildContext context, Duration remaining) {
  final minutes = remaining.inMinutes;
  final seconds = remaining.inSeconds % 60;
  return Text(
    '$minutes:${seconds.toString().padLeft(2, '0')}',
    style: TextStyle(fontSize: 48, fontWeight: FontWeight.bold),
  );
},

6. 控制倒计时

Countdown 组件还提供了一些方法来控制倒计时的开始、暂停和重置。你可以通过 CountdownController 来实现这些功能：

CountdownController _controller = CountdownController();

[@override](/user/override)
Widget build(BuildContext context) {
  return Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Countdown(
          controller: _controller,
          duration: Duration(seconds: 10),
          onFinish: () {
            print('Countdown finished!');
          },
          builder: (BuildContext context, Duration remaining) {
            return Text(
              '${remaining.inSeconds} seconds remaining',
              style: TextStyle(fontSize: 24),
            );
          },
        ),
        SizedBox(height: 20),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () => _controller.start(),
              child: Text('Start'),
            ),
            SizedBox(width: 10),
            ElevatedButton(
              onPressed: () => _controller.pause(),
              child: Text('Pause'),
            ),
            SizedBox(width: 10),
            ElevatedButton(
              onPressed: () => _controller.reset(),
              child: Text('Reset'),
            ),
          ],
        ),
      ],
    ),
  );
}
回到顶部