Flutter Countdown Timer

Hello Guys How are you all? Hope you all are fine. Many times we need to use Timer it could be for OTP resend timer. So we are going to learn How to use Flutter Countdown Timer. So lets this tutorial without wasting your time.

Flutter Countdown Timer

Here we are going to make Countdown starts from 10 to 0 on button click. Here is my code

class OtpTimer extends StatefulWidget {
  @override
  _OtpTimerState createState() => _OtpTimerState();
}

class _OtpTimerState extends State<OtpTimer> {
  Timer _timer;
  int _start = 10;

  void startTimer() {
    const oneSec = const Duration(seconds: 1);
    _timer = new Timer.periodic(
      oneSec,
      (Timer timer) {
        if (_start == 0) {
          setState(() {
            timer.cancel();
          });
        } else {
          setState(() {
            _start--;
          });
        }
      },
    );
  }

  @override
  void dispose() {
    _timer.cancel();
    super.dispose();
  }

  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Flutter Countdown Timer - FlutterCorner'),
        backgroundColor: Colors.green,
      ),
      body: Container(
        width: MediaQuery.of(context).size.width,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Row(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Icon(
                  Icons.timer,
                  size: 60,
                ),
                SizedBox(
                  width: 5,
                ),
                Text(
                  _start.toString(),
                  style: TextStyle(
                    fontSize: 50,
                  ),
                ),
              ],
            ),
            RaisedButton(
              onPressed: () {
                startTimer();
              },
              child: Text("Start Timer"),
            ),
          ],
        ),
      ),
    );
  }
}

With the above code which uses Timer.periodic, a new timer will indeed be started on each button click, and all these timers will update the same _start variable, resulting in a faster decreasing counter.

There are multiple solutions to change this behavior, depending on what you want to achieve :

• disable the button once clicked so that the user could not disturb the countdown anymore (maybe enable it back once timer is cancelled)
• wrap the Timer.periodic creation with a non null condition so that clicking the button multiple times has no effect

if (_timer != null) {
  _timer = new Timer.periodic(...);
}

• cancel the timer and reset the countdown if you want to restart the timer on each click :

if (_timer != null) {
  _timer.cancel();
  _start = 10;
}
_timer = new Timer.periodic(...);

• if you want the button to act like a play/pause button :

if (_timer != null) {
  _timer.cancel();
  _timer = null;
} else {
  _timer = new Timer.periodic(...);
}

You could also use this official async package which provides a RestartableTimer class that extends from Timer and adds the reset method.

Here is output.

Faq

Summery

So, It’s All About Flutter Countdown Timer. I hope this tutorial helps you to solve your error. Please Comment Below if You stucks anywhere with my code.

Also Check Out Below Tutorials

• The iOS deployment target ‘IPHONEOS_DEPLOYMENT_TARGET’ is set to 8.0, in Flutter How can I change the minimum IOS Deploying Target
• Textfield validation in Flutter
• How to create a circle icon button in Flutter?
• How to Set Space Between Elements In Flutter?
• unexpected element found in in flutter