How to show 5 min unstoppable timer in flutter app? - asynchronous

Question

I want to show a 5 min timer in my app which does't stop even when the app is closed and show the time left in mm:ss format. How can I show the time?

Answer 1

Here's a very very rudimentary example of how such a timer could work which persistently stores the target time:
class TimerApp extends StatefulWidget {
#override
_TimerAppState createState() => _TimerAppState();
}
class _TimerAppState extends State<TimerApp> {
SharedPreferences prefs;
DateTime target;
String timeLeft = "";
bool running = true;
#override
void initState() async {
super.initState();
prefs = await SharedPreferences.getInstance();
target = DateTime.fromMillisecondsSinceEpoch(prefs.getInt('target'));
if (target == null || target < DateTime.now()) {
target = DateTime.now().add(Duration(minutes: 5));
}
executeTimer();
}
#override
void dispose() {
prefs.setInt('target', target.millisecondsSinceEpoch);
running = false;
super.dispose();
}
void executeTimer() async {
while (running) {
setState(() {
timeLeft = DateTime.now().isAfter(target)
? '5 min expired. Restart app to reset.'
: target.difference(DateTime.now()).toString();
});
await Future.delayed(Duration(seconds: 1), () {});
}
}
#override
Widget build(BuildContext context) {
return Align(
alignment: Alignment.center,
child: Text(timeLeft),
);
}
}
Note that this example is not very fleshed out; several features are missing and using a while (running) loop is probably not the most elegant solution.
Here are some more resources you could have a look at:
The shared_preferences package for saving state persistently.
This Fluttery egg timer tutorial that uses a more sophisticated form of state management.