flutter实现发送验证码功能

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
class MyBody extends StatefulWidget {
 @override
 _MyBodyState createState() => _MyBodyState();
}
 
class _MyBodyState extends State<MyBody> {
 bool isButtonEnable=true;  //按钮状态 是否可点击
 String buttonText='发送验证码'; //初始文本
 int count=60;      //初始倒计时时间
 Timer timer;      //倒计时的计时器
 TextEditingController mController=TextEditingController();
 
 void _buttonClickListen(){
 setState(() {
  if(isButtonEnable){   //当按钮可点击时
  isButtonEnable=false; //按钮状态标记
  _initTimer();
 
  return null;   //返回null按钮禁止点击
  }else{     //当按钮不可点击时
//  debugPrint('false');
  return null;    //返回null按钮禁止点击
  }
 });
 }
 
 
 void _initTimer(){
 timer = new Timer.periodic(Duration(seconds: 1), (Timer timer) {
  count--;
  setState(() {
  if(count==0){
   timer.cancel();    //倒计时结束取消定时器
   isButtonEnable=true;  //按钮可点击
   count=60;     //重置时间
   buttonText='发送验证码';  //重置按钮文本
  }else{
   buttonText='重新发送($count)'; //更新文本内容
  }
  });
 });
 }
 
 
 @override
 void dispose() {
 timer?.cancel();  //销毁计时器
 timer=null;
 super.dispose();
 }
 
 
 @override
 Widget build(BuildContext context) {
 return Container(
  child: Column(
//  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
   Container(
    color: Colors.white,
    padding: EdgeInsets.only(left: 10,right: 10),
    child: Row(
     mainAxisAlignment: MainAxisAlignment.spaceBetween,
//     crossAxisAlignment: CrossAxisAlignment.center,
     crossAxisAlignment: CrossAxisAlignment.baseline,
     textBaseline: TextBaseline.ideographic,
     children: <Widget>[
     Text('验证码',style: TextStyle(fontSize: 13,color: Color(0xff333333)),),
     Expanded(
      child: Padding(padding: EdgeInsets.only(left: 15,right: 15,top: 15),
      child: TextFormField(
      maxLines: 1,
      onSaved: (value) { },
      controller: mController,
      textAlign: TextAlign.left,
      inputFormatters: [WhitelistingTextInputFormatter.digitsOnly,LengthLimitingTextInputFormatter(6)],
      decoration: InputDecoration(
       hintText: ('填写验证码'),
       contentPadding: EdgeInsets.only(top: -5,bottom: 0),
       hintStyle: TextStyle(
       color: Color(0xff999999),
       fontSize: 13,
       ),
       alignLabelWithHint: true,
       border: OutlineInputBorder(borderSide: BorderSide.none),
      ),
      ),),
     ),
     Container(
      width: 120,
      child: FlatButton(
      disabledColor: Colors.grey.withOpacity(0.1),  //按钮禁用时的颜色
      disabledTextColor: Colors.white,     //按钮禁用时的文本颜色
      textColor:isButtonEnable?Colors.white:Colors.black.withOpacity(0.2),       //文本颜色
      color: isButtonEnable?Color(0xff44c5fe):Colors.grey.withOpacity(0.1),       //按钮的颜色
      splashColor: isButtonEnable?Colors.white.withOpacity(0.1):Colors.transparent,
      shape: StadiumBorder(side: BorderSide.none),
      onPressed: (){ setState(() {
       _buttonClickListen();
      });},
//      child: Text('重新发送 (${secondSy})'),
      child: Text('$buttonText',style: TextStyle(fontSize: 13,),),
      ),
     ),
     ],
    ),
   ),
   Container(
   width: double.infinity,
   height: 45,
   margin: EdgeInsets.only(top: 50,left: 10,right: 10),
   child: RaisedButton(
    onPressed: () {
    debugPrint('${mController.text}');
    },
    shape: StadiumBorder(side: BorderSide.none),
    color: Color(0xff44c5fe),
    child: Text(
    '下一步',
    style: TextStyle(color: Colors.white,fontSize: 15),
    ),
   ),
   ),
  ],
  ),
 );
 }
}