前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >flutter发送验证码功能

flutter发送验证码功能

作者头像
砸漏
发布2020-11-02 17:08:55
1.4K0
发布2020-11-02 17:08:55
举报
文章被收录于专栏:恩蓝脚本恩蓝脚本

一个发送验证码的需求:包括限制文本框输入长度和只允许输入数字

按惯例 先上图:

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),
),
),
),
],
),
);
}
}

以上就是本文的全部内容,希望对大家的学习有所帮助。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2020-09-11 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
验证码
腾讯云新一代行为验证码(Captcha),基于十道安全栅栏, 为网页、App、小程序开发者打造立体、全面的人机验证。最大程度保护注册登录、活动秒杀、点赞发帖、数据保护等各大场景下业务安全的同时,提供更精细化的用户体验。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档