当前位置： 移动技术网 > IT编程>移动开发>Android > flutter发送验证码功能

flutter发送验证码功能

2019年09月06日  | 移动技术网IT编程  | 我要评论

阿仙奴官网,刘连坤,乳白油

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

按惯例 先上图:

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网