简体   繁体   English

颤振中的倒数计时器

[英]Countdown timer in flutter

I want to make a flutter countdown timer to display remaining registration time (DD-HH-MM).我想制作一个颤动倒数计时器来显示剩余注册时间(DD-HH-MM)。

Example:例子:

在此处输入图片说明

What would be the most efficient way of accomplishing this?实现这一目标的最有效方法是什么?

Thank you谢谢

Change below code as your design and requirement根据您的设计和要求更改以下代码

DateTime startTime = DateTime(2020,03,04);
  Duration remaining = DateTime.now().difference(DateTime.now());
  Timer t;
  int days=0,hrs =0, mins=0;

  @override
  void initState(){
    super.initState();
    startTimer();
  }

  startTimer()async{
    t = Timer.periodic(Duration(seconds:1),(timer){
      setState((){
      remaining = DateTime.now().difference(startTime);
        mins = remaining.inMinutes;
        hrs = mins>=60 ? mins~/60:0;
        days = hrs>=24 ? hrs~/24: 0;
        hrs = hrs%24;
        mins = mins%60;
      });

    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.white,
        body: Center(
            child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text('Registration closes in',
                  style: TextStyle(color: Colors.black, fontSize: 20),
                  textAlign: TextAlign.center),
            ),
            Row(
              mainAxisAlignment:MainAxisAlignment.spaceEvenly,
              children: [
              Expanded(
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text('$days',
                      style: TextStyle(color: Colors.black, fontSize: 20),
                             textAlign:TextAlign.center,),
                ),
              ),
              Expanded(
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text('$hrs',
                      style: TextStyle(color: Colors.black, fontSize: 20),
                             textAlign:TextAlign.center,),
                ),
              ),
              Expanded(
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text('$mins',
                      style: TextStyle(color: Colors.black, fontSize: 20),
                             textAlign:TextAlign.center,),
                ),
              ),
            ]),
            Row(
              mainAxisAlignment:MainAxisAlignment.spaceEvenly,
              children: [
              Expanded(
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text('Days',
                      style: TextStyle(color: Colors.black, fontSize: 16),
                             textAlign:TextAlign.center,),
                ),
              ),
              Expanded(
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text('Hours',
                      style: TextStyle(color: Colors.black, fontSize: 16),
                             textAlign:TextAlign.center,),
                ),
              ),
              Expanded(
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text('Minutes',
                      style: TextStyle(color: Colors.black, fontSize: 16),
                             textAlign:TextAlign.center,),
                ),
              ),
            ]),
          ],
        )));
  }

截屏

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM