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

简介

flutter_countdown_timer是一个简单的Flutter倒计时小部件，通过结束时间戳进行倒计时，并在倒计时结束后触发事件。

安装步骤

添加依赖

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

dependencies:
  flutter_countdown_timer: ^4.1.0

获取包

然后运行以下命令安装包：

$ flutter pub get

属性说明

CountdownTimer属性

CountdownTimerController属性

示例代码

简单示例

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    int endTime = DateTime.now().millisecondsSinceEpoch + 1000 * 30; // 设置倒计时时间为30秒

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Countdown Timer Example')),
        body: Center(
          child: CountdownTimer(
            endTime: endTime,
          ),
        ),
      ),
    );
  }
}

结束时执行事件

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

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

class MyApp extends StatelessWidget {
  void onEnd() {
    print('Countdown ended!');
  }

  @override
  Widget build(BuildContext context) {
    int endTime = DateTime.now().millisecondsSinceEpoch + 1000 * 30;

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Countdown Timer with Event')),
        body: Center(
          child: CountdownTimer(
            endTime: endTime,
            onEnd: onEnd,
          ),
        ),
      ),
    );
  }
}

使用控制器提前结束倒计时

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

class CountdownTimerPage extends StatefulWidget {
  @override
  _CountdownTimerPageState createState() => _CountdownTimerPageState();
}

class _CountdownTimerPageState extends State<CountdownTimerPage> {
  CountdownTimerController controller;
  int endTime = DateTime.now().millisecondsSinceEpoch + 1000 * 30;

  @override
  void initState() {
    super.initState();
    controller = CountdownTimerController(endTime: endTime, onEnd: onEnd);
  }

  void onEnd() {
    print('Countdown ended!');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Controlled Countdown Timer')),
      body: Center(
        child: CountdownTimer(
          controller: controller,
          onEnd: onEnd,
          endTime: endTime,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.stop),
        onPressed: () {
          onEnd();
          controller.disposeTimer();
        },
      ),
    );
  }

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

自定义样式

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    int endTime = DateTime.now().millisecondsSinceEpoch + 1000 * 30;

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Custom Styled Countdown Timer')),
        body: Center(
          child: CountdownTimer(
            endTime: endTime,
            widgetBuilder: (_, CurrentRemainingTime time) {
              if (time == null) {
                return Text('Game over');
              }
              return Text(
                  'days: [ ${time.days} ], hours: [ ${time.hours} ], min: [ ${time.min} ], sec: [ ${time.sec} ]');
            },
          ),
        ),
      ),
    );
  }
}

以上是关于flutter_countdown_timer插件的基本使用方法和一些示例代码。希望对你有所帮助！