Flutter Circular Countdown Timer - flutter

Question

I am trying to create a timer app which has multiple countdown timer for different task. The issue, I am facing is that, if I start a one-timer, and press the back button, the timer stops. So I want, that timer to run till either it is being paused or the timer ends and alerts the user, or the app is destroyed. Help me how can I do this using Flutter? Any Sample Code Will be Appreciated?
Please Help Me out, guys.
I have been stuck with this problem for a month. Don't know how to pass away from it guys.
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'));
}

Answer 1

tbh. i know this is a bad approach and performance on device may suffer. but you can define a controller in the state of the app. and then pass that controller in your timer. this is a very bad approach and you need to handle when to dispose off it. but its a workaround if nothing is working.