欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

flutter发送验证码功能

程序员文章站 2022-09-05 20:55:57
一个发送验证码的需求:包括限制文本框输入长度和只允许输入数字 按惯例 先上图: class mybody extends statefulwidget {...

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

按惯例 先上图:

flutter发送验证码功能

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

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