Flutter倒计时功能插件count_timer的使用
Flutter倒计时功能插件count_timer的使用
count_timer 是一个简单的倒计时插件，提供了清晰的接口来实现倒计时功能。
开始使用
导入插件
import 'package:count_timer/count_timer.dart';
初始化控制器和触发器
CountDownController countDownController = CountDownController(start: Duration(seconds: 20));
Trigger trigger = Trigger();
示例代码
以下是一个完整的示例代码，展示了如何在 Flutter 应用中使用 count_timer 插件：
import 'dart:math';
import 'package:count_timer/count_timer.dart';
import 'package:flutter/material.dart';
import 'package:flutter/physics.dart';
void main() {
runApp(ImageBuilder());
}
class ImageBuilder extends StatelessWidget {
ImageBuilder({Key? key}) : super(key: key);
CountDownController countDownController = CountDownController(start: Duration(seconds: 20));
Trigger trigger = Trigger();
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
textTheme: TextTheme(headline2: TextStyle(color: Colors.white)),
primaryColor: Colors.yellow),
home: Container(
child: Scaffold(
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.cover,
image: AssetImage("assets/images/background.jpg"))),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Container(
child: Center(
child: CountDownTimer(
startInstant: true,
triggerStart: trigger,
onTimerResumeBuilder: (ctx, duration) {
return Text("resume");
},
countDownController: countDownController,
onTimerPauseBuilder: (ctx, duration) {
print("difference is ${duration!.inSeconds}");
return Text(
"Counter Paused at ${duration.inSeconds}");
},
onStartBuilder: (ctx, duration, {flag}) {
return StareCase();
// if (flag == TriggerAction.RESTART) {
// return Text("restarting");
// }
return Text("Counter Start Builder");
},
onTickBuilder: (ctx, duration) {
return Text("ticking builder ${duration?.inSeconds}");
},
onEndBuilder: (ctx, duration) {
return Text("My counter end Builder");
},
)),
),
),
Expanded(
child: Container(
child: Center(
child: CountDownTimer.mixing(
startInstant: true,
triggerStart: trigger,
countDownController: this.countDownController,
countDownTimerBuilder:
(BuildContext ctx, Duration? duration) {
return StareCase();
},
)),
),
),
Container(
margin: EdgeInsets.symmetric(horizontal: 5, vertical: 5),
decoration:
BoxDecoration(border: Border.all(color: Colors.grey)),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
"Control Panel",
style: TextStyle(color: Colors.white),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
TextButton(
child: Text("START"),
onPressed: () {
trigger.addEvent(TriggerAction.START);
// trigger.start();
},
),
TextButton(
child: Text("STOP"),
onPressed: () {
trigger.addEvent(TriggerAction.STOP);
},
),
TextButton(
child: Text("RESTART"),
onPressed: () {
// countDownController.restart();
trigger.addEvent(TriggerAction.RESTART);
},
),
TextButton(
child: Text("PAUSE"),
onPressed: () {
trigger.addEvent(TriggerAction.PAUSE);
},
),
TextButton(
child: Text("RESUME"),
onPressed: () {
trigger.addEvent(TriggerAction.RESUME);
},
),
],
),
],
),
)
]),
),
)));
}
}
class StareCase extends StatelessWidget with CountDownTimerHandler {
Color stare1 = Colors.yellow;
double stare1HeightRatio = 0.2;
static double count = -1;
Duration? duration = Duration.zero;
buildRocket() {
return Transform.rotate(
angle: -0.8,
child: Text(
" 🚀",
style: TextStyle(fontSize: 40),
));
}
buildStarShip() {
return Image.asset("assets/images/starship.png");
}
buildFalconHeavy() {
return Image.asset("assets/images/falcon_heavy.png");
}
Widget build(BuildContext context) {
double height = MediaQuery.of(context).size.height;
double width = MediaQuery.of(context).size.width;
return SafeArea(
child: Stack(
children: [
Container(
alignment: Alignment.bottomLeft,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Container(
height: height * 0.15,
width: width * 0.15,
child: Stack(
alignment: Alignment.bottomCenter,
children: [
AnimatedAlign(
alignment: Alignment(0, count),
duration: Duration(seconds: 1),
child: Ball())
],
),
decoration: BoxDecoration(color: stare1),
),
Container(
height: height * 0.35,
width: width * 0.15,
child: Stack(
children: [
AnimatedAlign(
alignment: Alignment(0, count),
duration: Duration(seconds: 1),
child: buildRocket())
],
),
decoration: BoxDecoration(color: Colors.yellow),
),
Container(
height: height * 0.45,
width: width * 0.15,
child: Stack(
children: [
AnimatedAlign(
alignment: Alignment(0, count),
duration: Duration(seconds: 1),
child: buildFalconHeavy())
],
),
decoration: BoxDecoration(color: Colors.yellow),
),
Container(
height: height * 0.7,
width: width * 0.15,
child: Stack(
children: [
AnimatedAlign(
alignment: Alignment(0, count),
duration: Duration(seconds: 1),
child: buildStarShip())
],
),
decoration: BoxDecoration(color: Colors.yellow),
),
],
),
),
Align(
alignment: Alignment.topCenter,
child: Text("${duration?.inSeconds}"))
],
),
);
}
@override
Widget? onEndBuilder(BuildContext ctx, Duration? duration) {
count = 0;
return this;
}
@override
Widget? onErrorBuilder(BuildContext ctx, Duration? duration) {}
@override
Widget? onStartBuilder(BuildContext ctx, Duration? duration,
{TriggerAction? flag}) {
print("called");
}
@override
Widget? onTickBuilder(BuildContext ctx, Duration? duration) {
//double h1 = MediaQuery.of(ctx).size.height * 0.15;
this.stare1HeightRatio = 0;
count = -(-duration!.inSeconds.toDouble() + 20);
this.duration = duration;
print("count ${count}");
}
@override
Widget? onTimerPauseBuilder(BuildContext ctx, Duration? duration) {}
@override
Widget? onTimerResumeBuilder(BuildContext ctx, Duration? duration) {}
}
class Ball extends StatefulWidget {
@override
_BallState createState() => _BallState();
}
class _BallState extends State<Ball> with SingleTickerProviderStateMixin {
@override
Widget build(BuildContext context) {
return buildBall();
}
buildBall() {
return Image.asset("assets/images/ball.png");
}
}
控制倒计时
你可以通过按钮来控制倒计时的开始、停止、重启、暂停和恢复。
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
TextButton(
child: Text("START"),
onPressed: () {
trigger.addEvent(TriggerAction.START);
// trigger.start();
},
),
TextButton(
child: Text("STOP"),
onPressed: () {
trigger.addEvent(TriggerAction.STOP);
},
),
TextButton(
child: Text("RESTART"),
onPressed: () {
// countDownController.restart();
trigger.addEvent(TriggerAction.RESTART);
},
),
TextButton(
child: Text("PAUSE"),
onPressed: () {
trigger.addEvent(TriggerAction.PAUSE);
},
),
TextButton(
child: Text("RESUME"),
onPressed: () {
trigger.addEvent(TriggerAction.RESUME);
},
),
],
)
更多关于Flutter倒计时功能插件count_timer的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter倒计时功能插件count_timer的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
count_timer 是一个用于在 Flutter 中实现倒计时功能的插件。它可以帮助你轻松地在应用中添加倒计时功能。以下是如何使用 count_timer 插件的步骤：
1. 添加依赖
首先，你需要在 pubspec.yaml 文件中添加 count_timer 插件的依赖：
dependencies:
flutter:
sdk: flutter
count_timer: ^1.0.0 # 请使用最新版本
然后运行 flutter pub get 来安装依赖。
2. 导入包
在你的 Dart 文件中导入 count_timer 包：
import 'package:count_timer/count_timer.dart';
3. 使用 CountTimer
接下来，你可以在你的应用中使用 CountTimer 来实现倒计时功能。以下是一个简单的示例：
import 'package:flutter/material.dart';
import 'package:count_timer/count_timer.dart';
class CountdownTimerPage extends StatefulWidget {
@override
_CountdownTimerPageState createState() => _CountdownTimerPageState();
}
class _CountdownTimerPageState extends State<CountdownTimerPage> {
CountTimer _countTimer;
int _remainingTime = 60; // 设置倒计时时间（秒）
@override
void initState() {
super.initState();
_countTimer = CountTimer(
duration: Duration(seconds: _remainingTime),
onFinished: () {
print("倒计时结束");
},
onChanged: (Duration remainingTime) {
setState(() {
_remainingTime = remainingTime.inSeconds;
});
},
);
_countTimer.start();
}
@override
void dispose() {
_countTimer.cancel();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('倒计时示例'),
),
body: Center(
child: Text(
'倒计时: $_remainingTime 秒',
style: TextStyle(fontSize: 24),
),
),
);
}
}
void main() {
runApp(MaterialApp(
home: CountdownTimerPage(),
));
}
4. 解释代码
CountTimer: 这是count_timer插件提供的主要类，用于管理倒计时。duration: 设置倒计时的总时长。onFinished: 当倒计时结束时触发的回调函数。onChanged: 每当倒计时更新时触发的回调函数，通常用于更新 UI。start(): 启动倒计时。cancel(): 取消倒计时。
5. 运行应用
运行你的应用，你将看到一个简单的倒计时界面，倒计时从 60 秒开始，每秒更新一次，直到倒计时结束。
6. 其他功能
count_timer 还支持暂停、继续等功能，你可以根据需要进行扩展。例如：
// 暂停倒计时
_countTimer.pause();
// 继续倒计时
_countTimer.resume();