Flutter 按下按钮时开始颤振倒计时

所以我想做一个短信验证。我需要一个按钮，我按下发送短信，然后需要开始倒计时，这样你就不能再按按钮了。我在互联网上发现了这段代码（）问题是，一旦页面打开，它首先开始倒计时，而我需要的恰恰相反，一旦页面打开，首先按下按钮，然后看到倒计时，循环重复

import 'dart:async';

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  static const _timerDuration = 30;
  StreamController _timerStream = new StreamController<int>();
  int timerCounter;
  Timer _resendCodeTimer;
  
  @override
  void initState() {
    activeCounter();
    
    super.initState();
  }
  
  @override
  dispose(){
    _timerStream.close();
    _resendCodeTimer.cancel();
    
    super.dispose();
  }
  
  
  activeCounter(){
    _resendCodeTimer =
    new Timer.periodic(Duration(seconds: 1), (Timer timer) {
      if (_timerDuration - timer.tick > 0)
        _timerStream.sink.add(_timerDuration - timer.tick);
      else {
        _timerStream.sink.add(0);
        _resendCodeTimer.cancel();
      }
    });
  }
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: StreamBuilder(
              stream: _timerStream.stream,
              builder: (BuildContext ctx,
                  AsyncSnapshot snapshot) {
                return SizedBox(
                  width: 300,
                  height: 30,
                  child:RaisedButton(
                  textColor: Theme.of(context)
                      .accentColor,
                  child: Center(
                      child:
                      snapshot.data == 0 ?
                      Text('send code again')
                          : Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                          Text(' button will be enable after ${snapshot.hasData ? snapshot.data.toString() : 30} seconds '),
                        ],)
                  ),
                  onPressed: snapshot.data == 0 ? () {
                    // your sending code method

                    _timerStream.sink.add(30);
                    activeCounter();
                  } : null,
                )
                );
              },
            ),
      ),
    );
  }
}

导入'dart:async'；
进口“包装：颤振/材料.省道”；
void main（）=>runApp（MyApp（））；
类MyApp扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回材料PP(
标题：“颤振演示”，
debugShowCheckedModeBanner:false，
主题：主题数据(
主样本：颜色。蓝色，
),
主页：MyHomePage（标题：“颤振演示主页”），
);
}
}
类MyHomePage扩展StatefulWidget{
MyHomePage（{Key，this.title}）：超级（Key:Key）；
最后的字符串标题；
@凌驾
_MyHomePageState createState（）=>\u MyHomePageState（）；
}
类_MyHomePageState扩展状态{
静态持续时间=30；
StreamController _timerStream=新的StreamController（）；
时间计数器；
定时器_resendCodeTimer；
@凌驾
void initState（）{
activeCounter（）；
super.initState（）；
}
@凌驾
处置{
_timerStream.close（）；
_resendCodeTimer.cancel（）；
super.dispose（）；
}
activeCounter（）{
_重新发送代码计时器=
新定时器。周期性（持续时间（秒：1），（定时器）{
如果（_timerDuration-timer.tick>0）
_timerStream.sink.add（_timerDuration-timer.tick）；
否则{
_timerStream.sink.add（0）；
_resendCodeTimer.cancel（）；
}
});
}
@凌驾
小部件构建（构建上下文）{
返回脚手架(
appBar:appBar(
标题：文本（widget.title），
),
正文：中(
孩子：StreamBuilder(
流：_timerStream.stream，
生成器：（BuildContext ctx，
异步快照（快照）{
返回大小框(
宽度：300，
身高：30，
孩子：升起按钮(
textColor:Theme.of（上下文）
.accentColor，
儿童：中心(
儿童：
snapshot.data==0？
Text（'再次发送代码'）
：行(
mainAxisAlignment:mainAxisAlignment.center，
儿童：[
Text（'按钮将在${snapshot.hasData？snapshot.data.toString（）：30}秒后启用'，
],)
),
onPressed:snapshot.data==0？（）{
//您的发送代码方法
_timerStream.sink.add（30）；
activeCounter（）；
}：null，
)
);
},
),
),
);
}
}

从initState（）中删除activeCounter（），并在需要启动计时器时调用它。 完整示例：

import 'dart:async';

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({this.title}) : super();

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  static const _timerDuration = 30;
  StreamController _timerStream = new StreamController<int>();
  int timerCounter;
  Timer _resendCodeTimer;
  
  @override
  void initState() {
    _timerStream.sink.add(0);
    super.initState();
  }
  
  @override
  dispose(){
    _timerStream.close();
    _resendCodeTimer.cancel();
    
    super.dispose();
  }
  
  
  activeCounter(){
    _resendCodeTimer =
    new Timer.periodic(Duration(seconds: 1), (Timer timer) {
      if (_timerDuration - timer.tick > 0)
        _timerStream.sink.add(_timerDuration - timer.tick);
      else {
        _timerStream.sink.add(0);
        _resendCodeTimer.cancel();
      }
    });
  }
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: StreamBuilder(
              stream: _timerStream.stream,
              builder: (BuildContext ctx,
                  AsyncSnapshot snapshot) {
                print('Data: ${snapshot.data}');
                return SizedBox(
                  width: 300,
                  height: 30,
                  child:RaisedButton(
                  textColor: Theme.of(context)
                      .accentColor,
                  child: Center(
                      child:
                      snapshot.data == 0 ?
                      Text('send code again')
                          : Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                          Text(' button will be enable after ${snapshot.hasData ? snapshot.data.toString() : 30} seconds '),
                        ],)
                  ),
                  onPressed: snapshot.data == 0 ? () {
                    // your sending code method

                    _timerStream.sink.add(30);
                    activeCounter();
                  } : null,
                )
                );
              },
            ),
      ),
    );
  }
}

导入'dart:async'；
进口“包装：颤振/材料.省道”；
void main（）=>runApp（MyApp（））；
类MyApp扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回材料PP(
标题：“颤振演示”，
debugShowCheckedModeBanner:false，
主题：主题数据(
主样本：颜色。蓝色，
),
主页：MyHomePage（标题：“颤振演示主页”），
);
}
}
类MyHomePage扩展StatefulWidget{
MyHomePage（{this.title}）：super（）；
最后的字符串标题；
@凌驾
_MyHomePageState createState（）=>\u MyHomePageState（）；
}
类_MyHomePageState扩展状态{
静态持续时间=30；
StreamController _timerStream=新的StreamController（）；
时间计数器；
定时器_resendCodeTimer；
@凌驾
void initState（）{
_timerStream.sink.add（0）；
super.initState（）；
}
@凌驾
处置{
_timerStream.close（）；
_resendCodeTimer.cancel（）；
super.dispose（）；
}
activeCounter（）{
_重新发送代码计时器=
新定时器。周期性（持续时间（秒：1），（定时器）{
如果（_timerDuration-timer.tick>0）
_timerStream.sink.add（_timerDuration-timer.tick）；
否则{
_timerStream.sink.add（0）；
_resendCodeTimer.cancel（）；
}
});
}
@凌驾
小部件构建（构建上下文）{
返回脚手架(
appBar:appBar(
标题：文本（widget.title），
),
正文：中(
孩子：StreamBuilder(
流：_timerStream.stream，
生成器：（BuildContext ctx，
异步快照（快照）{
打印（'Data:${snapshot.Data}'）；
返回大小框(
宽度：300，
身高：30，
孩子：升起按钮(
textColor:Theme.of（上下文）
.accentColor，
儿童：中心(
儿童：
snapshot.data==0？
Text（'再次发送代码'）
：行(
mainAxisAlignment:mainAxisAlignment.center，
儿童：[
Text（'按钮将在${snapshot.hasData？snapshot.data.toString（）：30}秒后启用'，
],)
),
onPressed:snapshot.data==0？（）{
//您的发送代码方法
_timerStream.sink.add（30）；
activeCounter（）；
}：null，
)
);
},
),
),
);
}
}

只需更改initState（），如下所示：

@override
void initState() {
_timerStream.sink.add(0); //add this line

super.initState();
}

---

请显示实际代码而不是链接。我添加了代码。我认为链接更有用，因为你