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

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

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

time_remaining 插件可以告诉你距离指定时间还有多少时间，以倒计时的形式展示。

截图

示例截图

开始使用

添加包

在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  time_remaining: ^2.0.0+1
导入包

在 Dart 文件中导入该包：

import 'package:time_remaining/time_remaining.dart';

示例

以下是一个简单的示例，展示了如何使用 time_remaining 插件来创建一个倒计时组件：

// 忽略对print的警告
import 'package:flutter/material.dart';
import 'package:time_remaining/time_remaining.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Wrap(
          runSpacing: 8,
          spacing: 8,
          children: [
            TimeRemaining(
              duration: const Duration(
                days: 1,
                hours: 12,
              ),
              onTimeOver: () {
                print("TIME OVER");
              },
            ),
            const TimeRemaining(
              duration: Duration(
                days: 1,
              ),
              style: TextStyle(
                color: Colors.green,
              ),
            ),
            const TimeRemaining(
              duration: Duration(
                hours: 1,
              ),
              style: TextStyle(
                fontWeight: FontWeight.bold,
                color: Colors.green,
              ),
              warningDuration: Duration(
                hours: 1,
              ),
              warningsStyle: TextStyle(
                color: Colors.yellow,
              ),
            ),
            const TimeRemaining(
              duration: Duration(
                minutes: 30,
              ),
              warningDuration: Duration(
                hours: 1,
              ),
              warningsStyle: TextStyle(
                color: Colors.yellow,
              ),
              dangerDuration: Duration(
                minutes: 30,
              ),
              dangerStyle: TextStyle(
                color: Colors.red,
                fontWeight: FontWeight.bold,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

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

1 回复

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


当然，以下是如何在Flutter项目中使用time_remaining插件来实现倒计时功能的示例代码。这个插件可以帮助你轻松地计算并显示剩余时间。

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

dependencies:
  flutter:
    sdk: flutter
  time_remaining: ^x.y.z  # 请替换为最新版本号

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

接下来，你可以在你的Flutter项目中创建一个倒计时功能。以下是一个完整的示例，包括如何设置倒计时并实时更新UI。

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

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

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

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

class _CountdownTimerScreenState extends State<CountdownTimerScreen> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<int> _animation;
  late TimeRemaining _timeRemaining;

  @override
  void initState() {
    super.initState();
    // 设置倒计时时间为10秒
    int endTime = DateTime.now().millisecondsSinceEpoch + 10000;
    _timeRemaining = TimeRemaining.fromMilliseconds(endTime - DateTime.now().millisecondsSinceEpoch);

    _controller = AnimationController(
      duration: Duration(milliseconds: _timeRemaining.milliseconds),
      vsync: this,
    );

    _animation = IntTween(
      begin: _timeRemaining.seconds,
      end: 0
    ).animate(_controller);

    // 监听动画结束事件
    _controller.addListener(() {
      if (_controller.isCompleted) {
        setState(() {
          // 倒计时结束后，可以显示一些提示信息
          print("Time's up!");
        });
      }
    });

    // 开始倒计时
    _controller.repeat(reverse: true);
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Countdown Timer'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Time Remaining: ${_animation.value}s',
              style: TextStyle(fontSize: 24),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们做了以下几件事：

  1. 安装依赖：在pubspec.yaml中添加time_remaining依赖。
  2. 初始化倒计时：在initState方法中，设置了一个10秒的倒计时。
  3. 创建动画：使用AnimationController和IntTween来创建一个倒计时动画。
  4. 更新UI：使用Animation对象来实时更新UI，显示剩余时间。
  5. 监听动画结束：当倒计时结束时，打印"Time’s up!"。

注意：time_remaining插件在这个示例中主要用来计算初始的剩余时间，但动画和UI更新是通过Flutter的动画系统来实现的。如果你需要更复杂的时间处理，可以直接使用time_remaining提供的API来计算时间差，然后结合Flutter的动画系统来实现你的需求。

回到顶部