前言：
人生无奈????，生生把我这个做java 的逼成了全栈????，最近的一个教育app，本着想要多简略就做多简略的准则，和我搭档的前端帅小哥做了个究极半成品进去????，就我这暴脾气，默默地开始了优化，首先就从倒计时开始。前端帅小哥用的是 circular_countdown 来做倒计时


看起来貌似也还行哦，然而可能是我先入为主的缘故，因为之前看过一个相似的app，是进度条式的倒计时，所以感觉这个很难看，而后再面对着单色调的app界面，帅小哥那种搪塞跃然app上。查了一圈，我也没发现进度条式的flutter插件，只能通过 flutter_animation_progress_bar 来实现了（小弟很弱鸡，大牛轻点喷）

  1. 引入 flutter_animation_progress_bar 插件
dependencies:  flutter_animation_progress_bar: ^1.0.5

2.封装一个进度条倒计时

int _countdownNum = 0;Widget countDown() { return Align( alignment: Alignment.bottomCenter,    child: Container( child: FAProgressBar( currentValue: _countdownNum,        maxValue: 59,        displayText: '秒',        backgroundColor: Color(0xff2ec987),      ),    ),  );}

3.调用 countDown()

@overrideWidget build(BuildContext context) { return Scaffold( backgroundColor: Colors.black,      body: Container( decoration: BoxDecoration( image: DecorationImage( image: AssetImage("images/背景图3.jpg"),              fit: BoxFit.cover,            ),          ),          child: Scrollbar( child: Container( child: Stack( children: <Widget>[ Container( margin: EdgeInsets.fromLTRB(50, 0, 50, 90), child: FutureBuilder( future: _futureBuilderFuture,                    builder: _buildFuture,                  ),                ),                this.countDown()              ],            ),          ))));}

4.封装倒更新工夫函数

void reGetCountdown() { setState(() { if (_countdownTimer != null) { return;    } _countdownNum--;    _countdownTimer = new Timer.periodic(new Duration(seconds: 1), (timer) { setState(() { if (_countdownNum > 0) { _countdownNum--;        } else { _countdownTimer.cancel();          _countdownTimer = null;          this.timeEnd();        } });    });  });}

5.最初在 initState 中调用这个函数

@overridevoid initState() { super.initState();  SystemChrome.setPreferredOrientations(  reGetCountdown();}

成果如下：

ps:尽管还是丑，但曾经好多了????