Flutter倒计时进度条插件progress_bar_countdown的使用
Flutter倒计时进度条插件progress_bar_countdown的使用
创建一个带有动画线性进度条的倒计时计时器可以使用 Progress Bar Countdown
插件。
特点
- 前进和后退倒计时计时器
- 开始、暂停、恢复和重置计时器的功能
- 可自定义的颜色和样式
- 左到右或右到左的进度方向
- 选项格式化倒计时字符串
- 选项显示/隐藏倒计时文本
开始使用
要使用此插件,在你的 pubspec.yaml
文件中添加 progress_bar_countdown
作为依赖项:
dependencies:
progress_bar_countdown: ^0.0.2
使用方法
以下是一个完整的示例,展示如何使用 ProgressBarCountdown
组件:
import 'package:flutter/material.dart';
import 'package:progress_bar_countdown/progress_bar_countdown.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Progress Bar Countdown',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const MyHomePage(title: 'Example Progress Bar Countdown'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final ProgressBarCountdownController controller = ProgressBarCountdownController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: Text(widget.title),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
ProgressBarCountdown(
initialDuration: const Duration(seconds: 20),
height: 150,
controller: controller,
hideText: false,
autoStart: false,
progressColor: Colors.deepPurple,
progressBackgroundColor: Colors.deepPurple.shade200,
initialTextColor: Colors.deepPurple.shade100,
revealedTextColor: Colors.white,
countdownDirection: ProgressBarCountdownAlignment.right,
textStyle: const TextStyle(fontSize: 48.0, fontWeight: FontWeight.w800),
onStart: () => {debugPrint("Countdown Started")},
onComplete: () => {debugPrint("Countdown Completed")},
onChange: (changeValue) => debugPrint("Change Value: $changeValue"),
timeFormatter: (Duration remainingTime) {
final minutes = remainingTime.inMinutes
.remainder(60)
.toString()
.padLeft(2, '0');
final seconds = remainingTime.inSeconds
.remainder(60)
.toString()
.padLeft(2, '0');
final milliseconds = (remainingTime.inMilliseconds % 1000 ~/ 10)
.toString()
.padLeft(2, '0');
return '$minutes:$seconds:$milliseconds';
},
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Column(
children: [
IconButton(
onPressed: () => controller.start(),
icon: const Icon(Icons.play_arrow_outlined),
),
const Text("Start")
],
),
const SizedBox(width: 10),
Column(
children: [
IconButton(
onPressed: () => controller.pause(),
icon: const Icon(Icons.pause_circle),
),
const Text("Pause")
],
),
const SizedBox(width: 10),
Column(
children: [
IconButton(
onPressed: () => controller.resume(),
icon: const Icon(Icons.play_circle_fill),
),
const Text("Resume")
],
),
const SizedBox(width: 10),
Column(
children: [
IconButton(
onPressed: () => controller.reset(duration: const Duration(seconds: 10)),
icon: const Icon(Icons.restore_outlined),
),
const Text("Reset")
],
),
],
),
],
),
);
}
}
在这个示例中,我们创建了一个简单的应用,其中包含一个进度条倒计时组件。该组件倒计时20秒,并且用户可以通过按钮来控制倒计时的开始、暂停、恢复和重置。
参数
以下是 ProgressBarCountdown
的参数及其说明:
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
initialDuration | Duration | 必须 | 倒计时持续时间(秒)。 |
progressColor | Color | 必须 | 进度条的颜色。 |
progressBackgroundColor | Color | Colors.white | 进度条的背景颜色。 |
initialTextColor | Color? | null | 倒计时文本的初始颜色。 |
revealedTextColor | Color? | null | 倒计时文本被进度条揭示时的颜色。 |
hideText | bool | false | 是否隐藏倒计时文本。 |
height | double | 50.0 | 进度条的高度。 |
textStyle | TextStyle | TextStyle(fontSize: 18, fontWeight: FontWeight.bold) | 倒计时文本的样式。 |
countdownDirection | ProgressBarCountdownAlignment | ProgressBarCountdownAlignment.left | 倒计时的方向(左到右或右到左)。 |
controller | ProgressBarCountdownController? | null | 控制倒计时的控制器。 |
autoStart | bool | false | 是否自动开始倒计时。 |
onComplete | VoidCallback? | null | 倒计时完成后执行的回调函数。 |
onStart | VoidCallback? | null | 倒计时开始时执行的回调函数。 |
onChange | ValueChanged<String>? | null | 倒计时值改变时执行的回调函数。 |
textFormatter | String Function(Duration remainingTime)? | null | 倒计时值改变时执行的回调函数,用于格式化文本。 |
ProgressBarCountdownController
ProgressBarCountdownController
允许你通过编程方式控制倒计时计时器。
方法
start()
:启动倒计时计时器。pause()
:暂停倒计时计时器。resume()
:恢复已暂停的倒计时计时器。reset({double? duration})
:重置倒计时计时器。可选地指定新的持续时间。getTime()
:返回当前倒计时计时器的时间为字符串。
使用示例
final controller = ProgressBarCountdownController();
// 在你的构建方法中
ProgressBarCountdown(
// ... 其他参数 ...
controller: controller,
)
// 在代码的其他部分
ElevatedButton(
onPressed: () => controller.start(),
child: Text('Start'),
)
ElevatedButton(
onPressed: () => controller.pause(),
child: Text('Pause'),
)
ElevatedButton(
onPressed: () => controller.resume(),
child: Text('Resume'),
)
ElevatedButton(
onPressed: () => controller.reset(duration: 30),
child: Text('Reset to 30 seconds'),
)
更多关于Flutter倒计时进度条插件progress_bar_countdown的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter倒计时进度条插件progress_bar_countdown的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然,以下是一个关于如何在Flutter项目中使用progress_bar_countdown
插件的示例代码。这个插件可以帮助你实现一个带有倒计时功能的进度条。
首先,确保你已经在pubspec.yaml
文件中添加了progress_bar_countdown
依赖:
dependencies:
flutter:
sdk: flutter
progress_bar_countdown: ^最新版本号 # 请替换为最新版本号
然后运行flutter pub get
来安装依赖。
接下来,在你的Dart文件中使用ProgressBarCountdown
组件。以下是一个完整的示例:
import 'package:flutter/material.dart';
import 'package:progress_bar_countdown/progress_bar_countdown.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter ProgressBar Countdown Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
int _remainingTime = 10; // 倒计时总时间(秒)
bool _isRunning = false;
AnimationController _controller;
@override
void initState() {
super.initState();
_controller = AnimationController(
duration: Duration(seconds: _remainingTime),
vsync: this,
)..addListener(() {
setState(() {});
});
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
void _startCountdown() {
if (!_isRunning) {
_isRunning = true;
_controller.reset();
_controller.forward();
Future.delayed(Duration(seconds: _remainingTime), () {
setState(() {
_isRunning = false;
});
});
}
}
@override
Widget build(BuildContext context) {
double progress = _controller.value;
return Scaffold(
appBar: AppBar(
title: Text('ProgressBar Countdown Demo'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SizedBox(
width: double.infinity,
child: ProgressBarCountdown(
progress: progress,
duration: Duration(seconds: _remainingTime),
color: Colors.blue,
backgroundColor: Colors.grey[200]!,
borderRadius: BorderRadius.circular(10),
textStyle: TextStyle(color: Colors.white, fontSize: 20),
isRunning: _isRunning,
onEnd: () {
print('Countdown finished!');
},
),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: _startCountdown,
child: Text(_isRunning ? 'Stop' : 'Start'),
),
],
),
),
);
}
}
代码解释:
-
依赖引入:在
pubspec.yaml
文件中添加progress_bar_countdown
依赖。 -
主应用:
MyApp
是一个无状态组件,它设置了应用的主题和主页。 -
主页:
MyHomePage
是一个有状态组件,它包含了一个倒计时控制器和UI组件。 -
倒计时控制器:在
initState
方法中初始化了一个AnimationController
,它用于控制进度条的动画。addListener
方法用于监听动画的变化,并在每次变化时调用setState
来更新UI。 -
启动倒计时:
_startCountdown
方法用于启动或重置倒计时。如果倒计时正在运行,则不会重新启动。使用_controller.reset()
重置动画,然后使用_controller.forward()
开始动画。 -
UI组件:使用
ProgressBarCountdown
组件显示进度条。通过传递progress
、duration
、color
、backgroundColor
、borderRadius
和textStyle
等参数来自定义进度条的外观。isRunning
参数控制进度条的运行状态,onEnd
回调在倒计时结束时触发。 -
按钮:一个
ElevatedButton
用于启动或停止倒计时。
运行这个示例代码,你将看到一个带有倒计时功能的进度条,以及一个用于启动和停止倒计时的按钮。