In this blog we will learn how to implement Timer in flutter by creating an application.
As we all know , In today’s era making an application interactive and user friendly is very important.
Timer is a feature which we can give in our application .Using timer we can show the time in the backward counting on the UI.
Without wasting time anymore ,let’s begin the stepwise code implementation.
Check out more about our flutter app development services.
Step1:-
One of the best thing of this bloc is that we are not using any flutter dependency for the implementation of timer.
Make the object of Timer class and import “import ‘dart:async’;“
|
1 2 3 |
import 'dart:async'; // Timer Timer? _timer; |
Step2:- Create startTimer() method.
In this step we will handle the different cases of timer class.As you can see here we are handling onFinished,onFinishedExecuted.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
void _startTimer() { if (_timer?.isActive == true) { _timer!.cancel(); } if (_seconds != 0) { _timer = Timer.periodic( widget.interval, (Timer timer) { if (_seconds <= 0) { timer.cancel(); if (widget.onFinished != null) { widget.onFinished!(); _onFinishedExecuted = true; } } else { _onFinishedExecuted = false; setState(() { _seconds = _seconds - widget.interval.inSeconds; }); } }, ); } else if (!_onFinishedExecuted) { if (widget.onFinished != null) { widget.onFinished!(); _onFinishedExecuted = true; } } } |
Step3:-Call the startTimer method
We will call the above created _startTimer() method in our initState().
|
1 2 3 4 5 6 |
@override void initState() { _seconds = widget.seconds; _startTimer(); super.initState(); } |
Step4:-Add the callback build method
In this step we will call the callback build method.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
final int seconds; final Widget Function(BuildContext, int) build; final Function? onFinished; final Duration interval; const Countdown({ Key? key, required this.seconds, required this.build, this.interval = const Duration(seconds: 1), this.onFinished, }) : super(key: key); @override Widget build(BuildContext context) { return widget.build( context, _seconds, ); } |
Step5:-Use the countdown class in the required screen.
Now we will use the countdown timer class in the required screen.As you can see ,we are only calling the countdown class and passing the required parameters in it.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
Countdown( seconds: 2 * 60 * 60, build: (_, int time) { int hours = (time / 3600).toInt(); var second = (time % 3600).toInt(); int minutes = (second / 60).toInt(); second = (second % 60).toInt(); return Row( mainAxisAlignment: MainAxisAlignment.spaceAround, children: [ Text( hours.toString(), style: TextStyle( fontWeight: FontWeight.bold, fontSize: 24), ), Text( minutes.toString(), style: TextStyle( fontWeight: FontWeight.bold, fontSize: 24), ), Text( second.toString(), style: TextStyle( fontWeight: FontWeight.bold, fontSize: 24), ), ], ); }, interval: Duration(seconds: 1), onFinished: () {}, ), |
Now it’s done and you can run the code and check the output.
Congratulations!!!! you have learned the implementation of timer in flutter without import any external dependency.
For more details and methods you can refer to the official doc of flutter here.
For more interesting blogs check out here – https://mobikul.com/blog/
Hope this blog helped you with a better understanding of implement timer in flutter.
Thanks for reading.😇