Flutter淘宝App之首页聚划算倒计时的实现

Talk is cheap. Show me the code.

Flutter 淘宝App中为了实现聚划算的倒计时，我是这么做的，如下所示。

我就不废话了，这个实现起来不复杂，直接看代码吧

完整代码在
GitHub：Flutter 淘宝App

image

  AnimationController _animationController;

  String get hoursString {
    Duration duration = _animationController.duration * _animationController.value;
    return '${(duration.inHours)..toString().padLeft(2, '0')}';
  }

  String get minutesString {
    Duration duration = _animationController.duration * _animationController.value;
    return '${(duration.inMinutes % 60).toString().padLeft(2, '0')}';
  }

  String get secondsString {
    Duration duration = _animationController.duration * _animationController.value;
    return '${(duration.inSeconds % 60).toString().padLeft(2, '0')}';
  }

void initState() {
  //倒计时,注意vsync:this，这里需要混入TickerProviderStateMixin
    _animationController = AnimationController(vsync: this, duration: Duration(hours: 10, minutes: 30, seconds: 0));
    _animationController.reverse(from: _animationController.value == 0.0 ? 1.0 : _animationController.value);
}

如何使用

AnimatedBuilder(
        animation: _animationController,
        builder: (_, Widget child) {
          return Row(children: <Widget>[
            ClipRRect(
              borderRadius: BorderRadius.circular(3),
              child: Container(
                color: Colors.red,
                child: Text(
                  secondsString,
                  style: TextStyle(
                    color: Colors.white,
                  ),
                ),
              ),
            ),
          ]);
        });