Flutter时间显示插件pie_time_widget的使用
Flutter时间显示插件pie_time_widget的使用
特性
/*
- PieTimeWidget
- [
radius
[Bottom ring：
strokeWidth：边宽
]
[top ring：
Color list：充裕黄色，预警渐变[黄色，红色]，紧张红色
Time slot：0, [0.5, 0.75], 1
progress：
]
]
*/开始使用
在使用 pie_time_widget 插件之前，请确保已将其添加到您的 pubspec.yaml 文件中。然后运行以下命令以获取依赖项：
flutter pub get接下来，在 Dart 文件中导入插件：
import 'package:pie_time_widget/pie_time_widget.dart';使用方法
以下是一个完整的示例，展示了如何使用 PieTimeWidget 创建一个带有倒计时功能的饼状图。
示例代码
import 'package:flutter/material.dart';
import 'package:pie_time_widget/pie_time_widget.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('PieTimeWidget 示例'),
),
body: Center(
child: PieTimeWidgetDemo(),
),
),
);
}
}
class PieTimeWidgetDemo extends StatefulWidget {
[@override](/user/override)
_PieTimeWidgetDemoState createState() => _PieTimeWidgetDemoState();
}
class _PieTimeWidgetDemoState extends State<PieTimeWidgetDemo> {
int _remainTime = 5000; // 剩余时间（毫秒）
void _startCountdown() {
setState(() {
_remainTime = 5000; // 每次点击重新开始倒计时
});
}
[@override](/user/override)
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// 饼状图倒计时组件
RepaintBoundary(
child: PieTimeWidget(
50, // 圆环半径
0, // 起始角度（0 表示从正上方开始）
const Color(0xFFFFE475).withOpacity(0.6), // 充裕状态的颜色
const Color(0xFFEC3530).withOpacity(0.6), // 紧急状态的颜色
5000, // 总时间（毫秒）
remainTime: _remainTime, // 当前剩余时间
endTimeCallback: () {
// 倒计时结束回调
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('倒计时结束！')),
);
},
),
),
SizedBox(height: 20),
// 开始倒计时按钮
ElevatedButton(
onPressed: _startCountdown,
child: Text('开始倒计时'),
),
],
);
}
}
1 回复
更多关于Flutter时间显示插件pie_time_widget的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
pie_time_widget 是一个用于在 Flutter 应用中显示时间饼图的插件。它可以帮助你以饼图的形式展示时间进度，非常适合用于倒计时、计时器或时间进度展示等场景。
安装插件
首先，你需要在 pubspec.yaml 文件中添加 pie_time_widget 插件的依赖：
dependencies:
flutter:
sdk: flutter
pie_time_widget: ^1.0.0 # 请使用最新版本然后运行 flutter pub get 来安装依赖。
使用 PieTimeWidget
以下是一个简单的示例，展示如何使用 PieTimeWidget 来显示一个时间饼图。
import 'package:flutter/material.dart';
import 'package:pie_time_widget/pie_time_widget.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Pie Time Widget Example'),
),
body: Center(
child: PieTimeWidget(
startTime: DateTime.now(),
endTime: DateTime.now().add(Duration(minutes: 30)),
backgroundColor: Colors.grey[300],
progressColor: Colors.blue,
strokeWidth: 10.0,
size: 200.0,
),
),
),
);
}
}参数说明
startTime: 开始时间，类型为DateTime。endTime: 结束时间，类型为DateTime。backgroundColor: 饼图的背景颜色，类型为Color。progressColor: 饼图的进度颜色，类型为Color。strokeWidth: 饼图的线条宽度，类型为double。size: 饼图的大小，类型为double。
自定义样式
你可以通过调整 backgroundColor、progressColor、strokeWidth 和 size 等参数来自定义饼图的外观。
动态更新
如果你需要动态更新饼图的时间进度，可以通过 setState 方法来更新 startTime 和 endTime。
class MyApp extends StatefulWidget {
[@override](/user/override)
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
DateTime startTime = DateTime.now();
DateTime endTime = DateTime.now().add(Duration(minutes: 30));
void updateTime() {
setState(() {
endTime = DateTime.now().add(Duration(minutes: 30));
});
}
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Pie Time Widget Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
PieTimeWidget(
startTime: startTime,
endTime: endTime,
backgroundColor: Colors.grey[300],
progressColor: Colors.blue,
strokeWidth: 10.0,
size: 200.0,
),
SizedBox(height: 20),
ElevatedButton(
onPressed: updateTime,
child: Text('Update Time'),
),
],
),
),
),
);
}
}