Implement Timer in flutter

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.

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’;“

import 'dart:async';
 // Timer
  Timer? _timer;

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.

  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;
      }
    }
  }

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().

  @override
  void initState() {
    _seconds = widget.seconds;
    _startTimer();
    super.initState();
  }

@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.

  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,
    );
  }

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.

    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: () {},
                        ),

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.😇

Vandana Sharma 28 July 2022

. . .

Implement Timer in flutter

Step1:-

Step2:- Create startTimer() method.

Step3:-Call the startTimer method

Step4:-Add the callback build method

Step5:-Use the countdown class in the required screen.

Leave a Comment Cancel Reply

Message Sent!