Flutter倒计时定时器--重新获取验证码

写一个倒计时定时器听起来真的好简单，然而在Flutter里面写这个东西还是挺坑的。
原本以为创建一个Timer就一切都搞定了，但并没办法实时获取倒计时的进度。

void countdown(){
    Timer timer = new Timer(new Duration(seconds: 10), () {
        // 只在倒计时结束时回调
    });
}

    看了一下源码，我们还可以创建一个周期性的Timer，从打印结果可以看到Timer的tick是从1开始的。

void countdown(){
    Timer countdownTimer =  new Timer.periodic(new Duration(seconds: 1), (timer) {
        print(countdownTimer.tick);
    }
}

    我们修改一下做一个倒计时获取重新获取验证码的功能。

  Timer _countdownTimer;
  String _codeCountdownStr = '获取验证码';
  int _countdownNum = 59;

  void reGetCountdown() {
    setState(() {
      if (_countdownTimer != null) {
          return;
      }
      // Timer的第一秒倒计时是有一点延迟的，为了立刻显示效果可以添加下一行。
      _codeCountdownStr = '${_countdownNum--}重新获取';
      _countdownTimer =
          new Timer.periodic(new Duration(seconds: 1), (timer) {
        setState(() {
          if (_countdownNum > 0) {
            _codeCountdownStr = '${_countdownNum--}重新获取';
          } else {
            _codeCountdownStr = '获取验证码';
            _countdownNum = 59;
            _countdownTimer.cancel();
            _countdownTimer = null;
          }
        });
      });
    });
  }

 // 不要忘记在这里释放掉Timer
 @override
  void dispose() {
    _countdownTimer?.cancel();
    _countdownTimer = null;
    super.dispose();
  }

完整代码:

typedef VoidCallback = void Function();

class CountDownWidget extends StatefulWidget {
   final VoidCallback onPressed;
    int time;
    TextStyle startStyle;
    TextStyle downStyle;
    String startText;
    String downText;

    CountDownWidget({int time,TextStyle startStyle,TextStyle downStyle,String startText,String downText,this.onPressed}): this.time = time,this.startStyle = startStyle,this.downStyle = downStyle,this.startText = startText,this.downText = downText ;

  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return FollowleState(this.time,this.startStyle,this.downStyle,this.startText,this.downText);
  }

}

class FollowleState extends State<CountDownWidget>{
  int time;
  int custime;
  TextStyle startStyle;
  TextStyle downStyle;
  TextStyle style;
  Timer _countdownTimer;
  String startText;
  String downText;
  String _codeCountdownStr;

  FollowleState(int time,TextStyle startStyle,TextStyle downStyle, String startText,String downText){
    this.time = time;
    this.custime = time;
    this.custime = time;
    this.startStyle = startStyle;
    this.downStyle = downStyle;
    this.style = startStyle;
    this.startText = startText;
    this.downText = downText;
  }


  void reGetCountdown() {
    setState(() {
      if (_countdownTimer != null) {
        return;
      }
      style = downStyle;
      _codeCountdownStr = startText;
      // Timer的第一秒倒计时是有一点延迟的，为了立刻显示效果可以添加下一行。
      _codeCountdownStr = '$downText(${time--}s)';
      _countdownTimer =
      new Timer.periodic(new Duration(seconds: 1), (timer) {
        setState(() {
          if (time > 0) {
            style = downStyle;
            _codeCountdownStr = '$downText(${time--}s)';
          } else {
            style = startStyle;
            _codeCountdownStr = startText;
            time = custime;
            _countdownTimer.cancel();
            _countdownTimer = null;
          }
        });
      });
    });
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();

  }

  @override
  void initState() {
    // TODO: implement initState
    _countdownTimer?.cancel();
    _countdownTimer = null;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {

    return Center(
        child: GestureDetector(
          child: Text(_codeCountdownStr,style: style,),
          onTap: (){
            this.widget.onPressed();
            reGetCountdown();
          },
        ),
    );

  }

}