Flutter:验证码倒计时的实现

1.先看看api文档有没有像安卓CountDownTimer一样的类

地址： https://api.dart.dev/stable/2.4.0/dart-async/Timer-class.html

image.png

ok,既然有api，那就照着葫芦画瓢

2.导入包

   import 'dart:async';

3.添加一个倒计时方法

class LoginPageState extends State<LoginPage> {
  //定义变量
  Timer _timer;
  //倒计时数值
  var countdownTime = 0;

  //倒计时方法
  startCountdown() {
    countdownTime = 60;
    final call = (timer) {
      setState(() {
        if (countdownTime < 1) {
          _timer.cancel();
        } else {
          countdownTime -= 1;
        }
      });
    };
    _timer = Timer.periodic(Duration(seconds: 1), call);
  }

咋和官方文档不一样，官方的只是倒计时，而我们需要重复这个倒计时，还是看文档

image.png

Timer.periodic 为创造一个重复的倒计时对象

3.为我们的验证码 Text添加点击方法

image.png

可以看到又多了一层判断countdownTime=0，如果不加这个判断的话，每次点击都会执行开始计时，计时器就会创建多个。

4.为Text赋值

我这里定义了一个方法

String handleCodeText() {
    if (countdownTime > 0) {
      return "${countdownTime}s后重新获取";
    } else
      return "获取验证码";
  }

当然你也可以用Java中的三目运算符

     child: Text(
             countdownTime>0?"${countdownTime}s后重新获取":"获取验证码",
              style: TextStyle(
              color: Color.fromRGBO(21, 201, 187, 1)),
      ),

5.别忘了在页面关闭时取消掉这个Timer

@override
 void dispose() {
   super.dispose();
   if (_timer != null) {
     _timer.cancel();
   }
 }

6.最后来看一下效果吧，为了方便演示，我把时间调成了5s

timer.gif

github：https://github.com/Lans/flutter_timer