简体   繁体   中英

Countdown timer in flutter

I want to make a flutter countdown timer to display remaining registration time (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,),
                ),
              ),
            ]),
          ],
        )));
  }

截屏

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

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