flutter实现一个倒计时

最新推荐文章于 2024-02-27 17:53:20 发布

%稻草人

最新推荐文章于 2024-02-27 17:53:20 发布

阅读量771

点赞数 1

文章标签： flutter android

本文链接：https://blog.csdn.net/weixin_45003123/article/details/127234660

版权

flutter实现一个倒计时

CountdownTimer组件：

endTime是结束时间戳，有时候后端返回的位数不够，需要乘以1000，根据自己情况写。

其中AnimatedFlipCounter是一个计时器的库，pub.dev上已经支持空安全

import 'package:flutter/animation.dart';

class CurrentRemainingTime {
  final int? days;
  final int? hours;
  final int? min;
  final int? sec;
  final Animation<double>? milliseconds;

  CurrentRemainingTime({this.days, this.hours, this.min, this.sec, this.milliseconds});

  @override
  String toString() {
    return 'CurrentRemainingTime{days: $days, hours: $hours, min: $min, sec: $sec, milliseconds: ${milliseconds?.value}';
  }
}

 CountdownTimer( 
       endTime:contentDate['info']['deadline']*1000??0,
       endWidget:const Text('已失效'),
       widgetBuilder: (BuildContext context, CurrentRemainingTime? time) {
        return 
         Stack(
           clipBehavior: Clip.none,
             children:[
               Container(
                 alignment: Alignment.center,
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: [
                            AnimatedFlipCounter(
                              wholeDigits:2,
                              textStyle: const TextStyle(color: Colors.purple),
                              value: time.hours!=null?time.hours!.toDouble():00,
                              suffix: ':',
                              duration: const Duration(milliseconds: 500),
                              ),
                            AnimatedFlipCounter(
                              wholeDigits:2,
                              textStyle: const TextStyle(color: Colors.purple),
                              value: time.min!=null?time.min!.toDouble():00,
                              suffix: ':',
                              duration: const Duration(milliseconds: 500),
                              ),
                            AnimatedFlipCounter(
                              value: time.sec!=null?time.sec!.toDouble():00,
                              textStyle: const TextStyle(color: Colors.purple),
                              wholeDigits: 2,
                              curve: Curves.bounceOut,
                              duration: const Duration(milliseconds: 500),
                              ), 
                            const Text('后失效',style:TextStyle(color: Colors.purple))
                          ],
                      ),
                ),
           ]);
     }
 ),