Flutter Countdown Timer

Question

How can I do to put the value passed in the construction  to make a timer that rounds to the first decimal and shows at the child text of my RaisedButton  I ve tried but without luck  I manage to make work the callback function with a simple Timer but no periodic and with no update of value in real time in the text     import  package flutter material dart   import  dart ui   import  dart async    class TimerButton extends StatefulWidget     final Duration timerTastoPremuto      TimerButton this timerTastoPremuto       override    TimerButtonState createState     gt   TimerButtonState       class  TimerButtonState extends State lt TimerButton gt       override   Widget build BuildContext context        return Container        margin  EdgeInsets all 5 0         height  135 0        width  135 0        child  new RaisedButton          elevation  100 0          color  Colors white withOpacity  8           highlightElevation  0 0          onPressed                 int  start   widget timerTastoPremuto inMilliseconds             const oneDecimal   const Duration milliseconds  100             Timer  timer   new Timer periodic                oneDecimal                     Timer timer    gt                    setState                          if   start  lt  100                           timer cancel                          else                          start    start - 100                                                                   splashColor  Colors red          highlightColor  Colors red            shape  RoundedRectangleBorder e tutto il resto uguale         shape  BeveledRectangleBorder              side  BorderSide color  Colors black  width  2 5               borderRadius  new BorderRadius circular 15 0            child  new Text               start             style  new TextStyle fontFamily   Minim   fontSize  50 0

User · Answer

Here is my Timer widget  not related to the Question but may help someone   import  dart async    import  package flutter material dart    class OtpTimer extends StatefulWidget      override    OtpTimerState createState     gt   OtpTimerState       class  OtpTimerState extends State lt OtpTimer gt      final interval   const Duration seconds  1      final int timerMaxSeconds   60     int currentSeconds   0     String get timerText   gt             timerMaxSeconds - currentSeconds     60  toString   padLeft 2   0         timerMaxSeconds - currentSeconds    60  toString   padLeft 2   0         startTimeout  int milliseconds         var duration   interval      Timer periodic duration   timer          setState              print timer tick           currentSeconds   timer tick          if  timer tick  gt   timerMaxSeconds  timer cancel                              override   void initState         startTimeout        super initState            override   Widget build BuildContext context        return Row        mainAxisSize  MainAxisSize min        children   lt Widget gt           Icon Icons timer           SizedBox            width  5                     Text timerText                          You will get something like this

User · Answer

Here is an example using Timer periodic   Countdown starts from 10 to 0 on button click   import  dart async           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  AppBar title  Text  quot Timer test quot         body  Column        children   lt Widget gt           RaisedButton            onPressed                   startTimer                           child  Text  quot start quot                       Text  quot   start quot                           Result    You can also use the CountdownTimer class from the quiver async library  usage is even simpler   import  package quiver async dart           int  start   10  int  current   10   void startTimer       CountdownTimer countDownTimer   new CountdownTimer      new Duration seconds   start       new Duration seconds  1           var sub   countDownTimer listen null     sub onData  duration        setState       current    start - duration elapsed inSeconds               sub onDone          print  quot Done quot        sub cancel             Widget build BuildContext context      return new Scaffold      appBar  AppBar title  Text  quot Timer test quot         body  Column        children   lt Widget gt           RaisedButton            onPressed                   startTimer                           child  Text  quot start quot                       Text  quot   current quot                            EDIT   For the question in comments about button click behavior 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 which extends from Timer and adds the reset method  So just call  timer reset    on each button click  Finally  Codepen now supports Flutter   So here is a live example so that everyone can play with it   https   codepen io Yann39 pen oNjrVOb

User · Answer

Little late to the party but why don t you guys try animation No I am not telling you to manage animation controllers and disposing them off and all that stuff theres a built-in widget for that called TweenAnimationBuilder You can animate between values of any type heres an example with a Duration class TweenAnimationBuilder lt Duration gt                 duration  Duration minutes  3                 tween  Tween begin  Duration minutes  3   end  Duration zero                 onEnd                       print  Timer ended                                   builder   BuildContext context  Duration value  Widget child                  final minutes   value inMinutes                final seconds   value inSeconds   60                return Padding                       padding  const EdgeInsets symmetric vertical  5                        child  Text   minutes  seconds                               textAlign  TextAlign center                              style  TextStyle                              color  Colors black                              fontWeight  FontWeight bold                              fontSize  30                        and You also get onEnd call back which notifies you when the animation completes  here s the output

User · Answer

You can use this plugin timer builder timer builder widget that rebuilds itself on scheduled  periodic  or dynamically generated time events  Examples Periodic rebuild import  package timer builder timer builder dart    class ClockWidget extends StatelessWidget       override   Widget build BuildContext context        return TimerBuilder periodic Duration seconds  1         builder   context            return Text  quot   DateTime now    quot                             Rebuild on a schedule import  package timer builder timer builder dart    class StatusIndicator extends StatelessWidget      final DateTime startTime    final DateTime endTime       StatusIndicator this startTime  this endTime         override   Widget build BuildContext context        return TimerBuilder scheduled  startTime  endTime         builder   context            final now   DateTime now            final started   now compareTo startTime   gt   0          final ended   now compareTo endTime   gt   0          return Text started   ended    quot Ended quot    quot Started quot    quot Not Started quot

User · Answer

Countdown timer in one line  CountdownTimer Duration seconds  5   Duration seconds  1   listen  data       onData  data     print  data  data        onDone       print  onDone

User · Answer

I have created a Generic Timer Widget which can be used to display any kind of timer and its flexible as well   This Widget takes following properties   secondsRemaining  duration for which timer needs to run in seconds whenTimeExpires  what action needs to be performed if timer finished countDownStyle  any kind of style which you want to give to timer countDownFormatter  the way user wants to display the count down timer e g  hh mm ss string like 01 hours  20 minutes  45 seconds   you can provide a default formatter   formatHHMMSS   in case you don t want to supply it from every place      provide implementation for this - formatHHMMSS duration inSeconds   or use below one which I have provided   import  package flutter material dart   class CountDownTimer extends StatefulWidget     const CountDownTimer       Key key      int secondsRemaining      this countDownTimerStyle      this whenTimeExpires      this countDownFormatter          secondsRemaining   secondsRemaining          super key  key      final int secondsRemaining    final Function whenTimeExpires    final Function countDownFormatter    final TextStyle countDownTimerStyle     State createState     gt  new  CountDownTimerState       class  CountDownTimerState extends State lt CountDownTimer gt      with TickerProviderStateMixin     AnimationController  controller    Duration duration     String get timerDisplayString       Duration duration    controller duration    controller value      return widget countDownFormatter    null           widget countDownFormatter duration inSeconds            formatHHMMSS duration inSeconds            In case user doesn t provide formatter use the default one         for that create a method which will be called formatHHMMSS or whatever you like         override   void initState         super initState        duration   new Duration seconds  widget secondsRemaining        controller   new AnimationController        vsync  this        duration  duration              controller reverse from  widget secondsRemaining toDouble          controller addStatusListener  status          if  status    AnimationStatus completed    status    AnimationStatus dismissed            widget whenTimeExpires                            override   void didUpdateWidget CountDownTimer oldWidget        if  widget secondsRemaining    oldWidget secondsRemaining          setState              duration   new Duration seconds  widget secondsRemaining            controller dispose             controller   new AnimationController            vsync  this            duration  duration                      controller reverse from  widget secondsRemaining toDouble              controller addStatusListener  status              if  status    AnimationStatus completed                widget whenTimeExpires                else if  status    AnimationStatus dismissed                print  Animation Complete                                                    override   void dispose          controller dispose        super dispose            override   Widget build BuildContext context        return new Center          child  AnimatedBuilder              animation   controller              builder      Widget child                  return Text                  timerDisplayString                  style  widget countDownTimerStyle                                            Usage     Container         width  60 0         padding  EdgeInsets only top  3 0  right  4 0            child  CountDownTimer             secondsRemaining  30             whenTimeExpires                     setState                      hasTimerStopped   true                                               countDownStyle  TextStyle                  color  Color 0XFFf5a623                   fontSize  17 0                  height  1 2                            example for formatHHMMSS   String formatHHMMSS int seconds      int hours    seconds   3600  truncate      seconds    seconds   3600  truncate      int minutes    seconds   60  truncate       String hoursStr    hours  toString   padLeft 2   0      String minutesStr    minutes  toString   padLeft 2   0      String secondsStr    seconds   60  toString   padLeft 2   0       if  hours    0        return   minutesStr  secondsStr          return   hoursStr  minutesStr  secondsStr

User · Answer

doesnt directly answer your question  But helpful for those who want to start something after some time   Future delayed Duration seconds  1                    print  yo hey

User · Answer

If all you need is a simple countdown timer  this is a good alternative instead of installing a package  Happy coding   countDownTimer   async    int timerCount   for  int x   5  x  gt  0  x--       await Future delayed Duration seconds  1   then            setState             timerCount -  1

User · Answer

I m using https   pub dev packages flutter countdown timer dependencies  flutter countdown timer   1 0 0   flutter pub get CountdownTimer endTime  1594829147719   1594829147719 is your timestamp in milliseconds

[timer] Flutter Countdown Timer

Examples related to timer

Examples related to dart

Examples related to flutter

Examples related to countdown