how to make a countdown clock run in the background - flutter

Question

I am try to create a timer app which have multiple countdown timer for different task. Issue I am facing is that if I start one timer, and press back button, timer stops. So I want, that timer to run till either it is being paused or timer ends and alerts the user or app is destroyed. how can I do this using Flutter?
import 'package:flutter/material.dart';
import 'package:slide_countdown_clock/slide_countdown_clock.dart';
class TaskCard extends StatefulWidget {
final String label;
final String info;
final String buttonText;
TaskCard({this.buttonText, this.info, this.label});
#override
State<TaskCard> createState() => _TaskCardState();
}
class _TaskCardState extends State<TaskCard> {
bool buttonText = true;
bool buttonPressed = false;
buttonTask() {
if (buttonText == false) {
return RawMaterialButton(
onPressed: () {},
child: Padding(
padding: const EdgeInsets.all(10.0),
child: SlideCountdownClock(
duration: Duration(
minutes: 2,
),
slideDirection: SlideDirection.Up,
separator: ":",
textStyle: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.bold,
),
onDone: () {
setState(() {
buttonText = true;
});
},
),
),
);
} else if (buttonText == true) {
return MaterialButton(
onPressed: () {
setState(() {
buttonText = false;
});
},
child: Text(
'Get Reward',
style: TextStyle(
color: Colors.white, fontWeight: FontWeight.bold, fontSize: 20.0),
),
);
}
}
#override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 20),
child: Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.pink[100]),
color: Colors.white,
borderRadius: BorderRadius.circular(20),
boxShadow: [
BoxShadow(
color: Colors.pink[100],
offset: Offset(-2, -1),
blurRadius: 5),
],
),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
widget.label,
style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
),
Padding(
padding: const EdgeInsets.all(10.0),
child: Text(widget.info,
textAlign: TextAlign.justify,
style: TextStyle(
fontSize: 25,
)),
),
Padding(
padding: const EdgeInsets.fromLTRB(90, 0, 90, 0),
child: Material(
borderRadius: BorderRadius.circular(20.0),
color: Colors.pinkAccent,
child: buttonTask()),
),
],
),
)),
);
}
}

Answer 1

You need a separate singleton(initializes at the start) or global(simpler) object to handle your timer. I assume you are declaring your timers in the widgets which is not a very good place for the stuff that you want to retain the state.