Question

我有一个Flutter应用程序，该应用程序应在警报框中显示倒计时计时器以确认电话代码（我需要此计时器在60秒结束后将代码重新发送给我的用户），当我单击确认时启动计时器Button，但是问题在于计时器没有显示出他正在下降，他的静止值保持不变。

这是我的提醒框

Alert Box with timer NOT SHOWING COUNT DOWN

这是我的计时器功能：

int _counter = 60;
   Timer _timer;
     void _startTimer(){
_counter = 60;
if(_timer != null){
  _timer.cancel();
}
_timer = Timer.periodic(Duration(seconds: 1), (timer){
  setState(() {
    (_counter > 0) ? _counter-- : _timer.cancel();
  });
});
}

这是我的提醒框代码：

void alertD(BuildContext ctx) {
var alert = AlertDialog(
    // title: Center(child:Text('Enter Code')),
    shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.all(Radius.circular(20.0))),
    backgroundColor: Colors.grey[100],
    elevation: 0.0,
    content: Container(
      height: 215,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Padding(
              padding: const EdgeInsets.only(
                  top: 10, left: 10, right: 10, bottom: 15),
              child: Text(
                'Enter Code',
                style: TextStyle(
                  color: Colors.green[800],
                  fontWeight: FontWeight.bold,
                  fontSize: 16
                ),
              )),
          Container(
            height: 70,
            width: 180,
            child: TextFormField(
              style: TextStyle(fontSize: 20,fontWeight: FontWeight.bold),
              textAlign: TextAlign.center,
              decoration: InputDecoration(
                enabledBorder: OutlineInputBorder(
                    borderSide:
                        BorderSide(color: Colors.green, width: 0.0)),
              ),
              keyboardType: TextInputType.number,
              maxLength: 10,
            ),
          ),
          SizedBox(
            height: 1,
          ),
          Text('00:$_counter'),
          SizedBox(height: 15,)
          ,
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              ClipRRect(
                borderRadius: BorderRadius.circular(25),
                child: Material(
                  child: InkWell(
                    onTap: () {
                      Navigator.of(ctx).pushNamed(SignUpScreenSecond.routeName);
                    },
                    child: Container(
                      width: 100,
                      height: 50,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(25),
                        gradient: LinearGradient(
                            colors: [
                              Colors.green,
                              Colors.grey,
                            ],
                            begin: Alignment.topLeft,
                            end: Alignment.bottomRight),
                      ),
                      child: Center(
                          child: Text(
                        'Validate',
                        style: TextStyle(
                            color: Colors.white,
                            fontSize: 16,
                            fontWeight: FontWeight.bold),
                      )),
                    ),
                  ),
                ),
              ),
              ClipRRect(
                borderRadius: BorderRadius.circular(25),
                child: Material(
                  child: InkWell(
                    onTap: () {},
                    child: Container(
                      width: 100,
                      height: 50,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(25),
                        gradient: LinearGradient(
                            colors: [
                              Colors.grey,
                              Colors.green,
                            ],
                            begin: Alignment.topLeft,
                            end: Alignment.bottomRight),
                      ),
                      child: Center(
                          child: Text(
                        'Resend',
                        style: TextStyle(
                            color: Colors.white,
                            fontSize: 16,
                            fontWeight: FontWeight.bold),
                      )),
                    ),
                  ),
                ),
              )
            ],
          ), //new column child
        ],
      ),
    ));
showDialog(
    context: ctx,
    builder: (BuildContext c) {
      return alert;
    });
 }

当我单击“确认”按钮时，这就是调用警报对话框和计时器的方式：

onTap: () {
           _startTimer;
           alertD(context);
              },

Answer 1

您可以在下面复制粘贴运行完整代码
您可以使用StreamBuilder和StreamController
AlertDialog content不断收到来自stream的{{1}} int

代码段

Timer

工作演示

完整代码

StreamController<int> _events;

  @override
  initState() {
    super.initState();
    _events = new StreamController<int>();
    _events.add(60);
  }

...
 _timer = Timer.periodic(Duration(seconds: 1), (timer) {
      (_counter > 0) ? _counter-- : _timer.cancel();
      print(_counter);
      _events.add(_counter);
    });

...
content: StreamBuilder<int>(
            stream: _events.stream,
            builder: (BuildContext context, AsyncSnapshot<int> snapshot) {

      ...
      Text('00:${snapshot.data.toString()}'),

如何在Flutter中显示一个倒数计时器和Alertbox

1 个答案: