[英]Flutter Circular Countdown Timer
我正在尝试创建一个计时器应用程序,它具有针对不同任务的多个倒计时计时器。 我面临的问题是,如果我启动一次性计时器并按下后退按钮,计时器就会停止。 所以我希望,该计时器一直运行直到它被暂停或计时器结束并提醒用户,或者应用程序被销毁。 帮助我如何使用 Flutter 执行此操作? 任何示例代码都会受到赞赏? 请帮帮我,伙计们。 我被这个问题困扰了一个月。 不知道如何摆脱它的家伙。
import 'dart:async';
import 'dart:convert';
import 'package:awesome_notifications/awesome_notifications.dart';
import 'package:circular_countdown_timer/circular_countdown_timer.dart';
import 'package:flash_chat/components/button.dart';
import 'package:flash_chat/screens/promotersDetails.dart';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
class ViewPromoters extends StatefulWidget {
final String a_id, s_id;
ViewPromoters({Key key, @required this.a_id, @required this.s_id})
: super(key: key);
@override
_ViewPromotersState createState() => _ViewPromotersState(a_id, s_id);
}
class _ViewPromotersState extends State<ViewPromoters> {
CountDownController _controller = CountDownController();
var descList = [
"Engagement Selfie = 5",
"Engagement Selfie = 7",
"Engagement Selfie = 9",
"Engagement Selfie = 7",
"Engagement Selfie = 3",
];
var selfieList = [
"Sampling Selfie = 5",
"Sampling Selfie = 7",
"Sampling Selfie = 9",
"Sampling Selfie = 7",
"Sampling Selfie = 3",
];
var dataList = [
"Data Collection = 5",
"Data Collection = 7",
"Data Collection = 9",
"Data Collection = 7",
"Data Collection = 3",
];
var timeList = [
"Last Selfie Time = 04:25 PM",
"Last Selfie Time = 04:20 PM",
"Last Selfie Time = 05:10 PM",
"Last Selfie Time = 03:20 PM",
"Last Selfie Time = 04:00 PM",
];
// Image Name List Here
var imgList = [
"images/img1.jpg",
"images/img2.jpg",
"images/img3.jpg",
"images/img4.jpg",
"images/img5.jpg",
];
String p_id, p_name;
Map mapResponse;
List listResponse;
String a_id, s_id;
_ViewPromotersState(this.a_id, this.s_id);
Future fetchdata() async {
print(s_id); // Supervisor Id
var url = await http.get(Uri.parse(
"http://demo.likemyfiles.com/DS/api/api_supervisor/supervisor/$s_id"));
setState(() {
mapResponse = json.decode(url.body);
print(mapResponse);
listResponse = mapResponse['promoters'];
print(listResponse);
});
}
@override
void initState() {
fetchdata();
super.initState();
}
@override
Widget build(BuildContext context) {
double width = MediaQuery.of(context).size.width * 0.6;
return Scaffold(
appBar: AppBar(
// App Bar
title: Text(
"Promoters Detail",
style: TextStyle(color: Colors.white),
),
actions: <Widget>[
IconButton(
icon: Icon(
Icons.notifications_active,
color: Colors.white,
),
onPressed: () {
Notify();
},
)
],
elevation: 5,
backgroundColor: Colors.green,
),
// Main List View With Builder
body: ListView.builder(
itemCount: 3,
itemBuilder: (context, index) {
return GestureDetector(
onTap: () {
p_id = listResponse[index]['id'].toString();
print(p_id);
p_name = listResponse[index]['name'].toString();
showDialogFunc(context, imgList[index], p_name, descList[index],
timeList[index], p_id, a_id);
},
// Card Which Holds Layout Of ListView Item
child: Card(
color: Colors.white,
elevation: 5,
child: Column(
children: [
**CircularCountDownTimer(
width: MediaQuery.of(context).size.width / 6,
height: MediaQuery.of(context).size.width / 6,
duration: 120,
fillColor: Colors.green,
ringColor: Colors.white,
controller: _controller,
backgroundColor: Colors.white54,
strokeWidth: 10.0,
strokeCap: StrokeCap.round,
isTimerTextShown: true,
isReverse: false,
onComplete: () {
Notify();
},
textStyle: TextStyle(fontSize: 20.0, color: Colors.black),
),**
Row(
children: <Widget>[
CircleAvatar(
radius: 60,
backgroundImage: AssetImage(imgList[index]),
),
Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
child: listResponse == null
? Container()
: Text(
listResponse[index]['name'].toString(),
style: TextStyle(
color: Colors.grey.shade500,
fontSize: 20.0,
fontWeight: FontWeight.w400,
),
),
),
SizedBox(
height: 10,
),
Container(
width: width,
child: Row(
children: [
Icon(
Icons.add_task_sharp,
color: Colors.grey[500],
size: 20.0,
),
SizedBox(
width: 7,
),
Text(
descList[index],
maxLines: 3,
style: TextStyle(
fontSize: 15,
color: Colors.grey[500],
fontWeight: FontWeight.w500),
),
],
),
),
Container(
width: width,
child: Row(
children: [
Icon(
Icons.add_photo_alternate_outlined,
color: Colors.grey[500],
size: 20.0,
),
SizedBox(
width: 7,
),
Text(
selfieList[index],
maxLines: 3,
style: TextStyle(
fontSize: 15,
color: Colors.grey[500],
fontWeight: FontWeight.w500),
),
],
),
),
Container(
width: width,
child: Row(
children: [
Icon(
Icons.dashboard_customize,
color: Colors.grey[500],
size: 20.0,
),
SizedBox(
width: 7,
),
Text(
dataList[index],
maxLines: 3,
style: TextStyle(
fontSize: 15,
color: Colors.grey[500],
fontWeight: FontWeight.w500),
),
],
),
),
Container(
width: width,
child: Row(
children: [
Icon(
Icons.assignment_ind_sharp,
color: Colors.grey[500],
size: 20.0,
),
SizedBox(
width: 7,
),
Text(
timeList[index],
maxLines: 3,
style: TextStyle(
fontSize: 15,
color: Colors.grey[500],
fontWeight: FontWeight.w500),
),
],
),
),
],
),
)
],
),
],
),
),
);
},
),
);
}
}
// This is a block of Model Dialog
showDialogFunc(context, img, title, desc, time, promoter_id, activity_id) {
return showDialog(
context: context,
builder: (context) {
return Center(
child: Material(
type: MaterialType.transparency,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.white,
),
padding: EdgeInsets.all(15),
height: 400,
width: MediaQuery.of(context).size.width * 0.7,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.circular(5),
child: Image.asset(
img,
width: 140,
height: 140,
),
),
SizedBox(
height: 10,
),
Text(
title,
style: TextStyle(
fontSize: 20,
color: Colors.grey,
fontWeight: FontWeight.bold,
),
),
SizedBox(
height: 2,
),
Container(
// width: 200,
child: Align(
alignment: Alignment.center,
child: Text(
time,
maxLines: 3,
style: TextStyle(fontSize: 15, color: Colors.grey[500]),
textAlign: TextAlign.center,
),
),
),
Button(
title: 'Attendance Photos',
colour: Colors.green,
onPressed: () {
print(activity_id);
print(promoter_id);
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => PromotersDetails(
url:
URL,
title: "Attendance Selfie",
)),
);
}),
Button(
title: 'Engagement Photos',
colour: Colors.green,
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => PromotersDetails(
url:
URL,
title: "Engagement Selfie",
)),
);
}),
Button(
title: ' Sampling Photos ',
colour: Colors.green,
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => PromotersDetails(
url:
URL,
title: "Sampling Photos",
)),
);
}),
],
),
),
),
);
},
);
}
void Notify() async {
await AwesomeNotifications().createNotification(
content: NotificationContent(
id: 1,
channelKey: 'key1',
title: 'This is Notification',
body: 'T His is body of Notify'));
}
tbh。 我知道这是一种糟糕的方法,设备性能可能会受到影响。 但是你可以在app的state中定义一个controller。 然后在你的计时器中传递 controller。 这是一种非常糟糕的方法,您需要处理何时处理它。 但如果没有任何效果,这是一种解决方法。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.