如何在 Flutter 倒计时后激活和停用按钮？

Question

我想在倒计时期间停用按钮。倒计时结束后按钮会自动激活。

我该怎么做？

您可以在下面找到计时器的代码。当这个计时器结束时，我想激活一个按钮

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

Answer 1

最简单的解决方案是在倒计时期间禁用您在按钮 onTapGesture 中执行的任何代码，然后仅在倒计时停止时执行它。

Editx2：因为你已经添加了你的计时器代码，概念仍然是一样的；

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

 });
 });

}

然后在您的 onPressed/onTap 处理程序中检查 countDownComplete 的值并执行您的代码）

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

编辑：

按要求添加代码：

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

如何在 Flutter 倒计时后激活和停用按钮？

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

timer

countdown

flutter