How can I activate and deactivate a button after countdown on Flutter?

Question

I would like to deactivate a button during a countdown. After countdown finishes button will be activated automatically.

How can I do it?

Below you could find code for timer. When this timer finishes I would like to activate a button

 import 'dart:async';

 import 'package:flutter/material.dart';

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

 class _OtpTimerState extends State<OtpTimer> {
  final interval = const Duration(seconds: 1);

   final int timerMaxSeconds = 60;

   int currentSeconds = 0;

     String get timerText =>
      '${((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 >= timerMaxSeconds) timer.cancel();
     });
     });
   }

   @override
   void initState() {
  startTimeout();
     super.initState();
     }

    @override
    Widget build(BuildContext context) {
        return Row(
     mainAxisSize: MainAxisSize.min,
    children: <Widget>[
      Icon(Icons.timer),
      SizedBox(
       width: 5,
       ),
     Text(timerText)
      ],
   );
    }
  }

Solution

Simplest solution would be to disable whatever code you are executing in your buttons onTapGesture during the countdown and then execute it only when countdown stops.

Editx2: As you have added your timer code the concept will still be the same;

bool countDownComplete = false;

startTimeout([int milliseconds]) {
  var duration = interval;
 Timer.periodic(duration, (timer) {
 setState(() {
   print(timer.tick);
  currentSeconds = timer.tick;
   if (timer.tick >= timerMaxSeconds) {
      setState(() { 
            countDownComplete = true;

           });
      timer.cancel();
   }

 });
 });

}

And then in your onPressed/onTap handler check for value of countDownComplete and execute your code)

 RaisedButton(
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(18.0),
    side: BorderSide(color: Colors.red)),
  onPressed: () {
      if(countDownComplete){
        //execute code
      } //else do nothing
   },
  color: Colors.red,
  textColor: Colors.white,
  child: Text("Buy now".toUpperCase(),
    style: TextStyle(fontSize: 14)),
),

Edit:

Added code as requested:

 bool countDownComplete = false; //Global boolean variable


 void countdownFunc(){
     //this is sample countdown function as you haven't added yours
     for(int a= 0; a<a++;a<10){
         if(a=9){
            setState(() { 
            countDownComplete = true;
               //when a=9, countdown will complete, 
               //  so then set boolean to true
           });
         }
     }
 }


 RaisedButton(
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(18.0),
    side: BorderSide(color: Colors.red)),
  onPressed: () {
      if(countDownComplete){
        //execute code
      } //else do nothing
   },
  color: Colors.red,
  textColor: Colors.white,
  child: Text("Buy now".toUpperCase(),
    style: TextStyle(fontSize: 14)),
),

Comments

[Jitesh Mohite]

Can you share your countdown code?

[Admin]

I've added the countdown code

[Admin]

Could you please share a sample code? I am quite new to Flutter :) Thank you!

[Admin]

Thanks for your kind support!