热门标签 | HotTags
当前位置:  开发笔记 > 开发工具 > 正文

flutter发送验证码功能

这篇文章主要为大家详细介绍了flutter发送验证码功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

按惯例 先上图:

class MyBody extends StatefulWidget {
 @override
 _MyBodyState createState() => _MyBodyState();
}
 
class _MyBodyState extends State {
 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: [
   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: [
     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),
    ),
   ),
   ),
  ],
  ),
 );
 }
}

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


推荐阅读
  • Python安全实践:Web安全与SQL注入防御
    本文旨在介绍Web安全的基础知识,特别是如何使用Python和相关工具来识别和防止SQL注入攻击。通过实际案例分析,帮助读者理解SQL注入的危害,并掌握有效的防御策略。 ... [详细]
  • Web3隐私协议Manta Network与区块链互操作性平台Axelar达成战略合作,共同推进跨链资产的隐私保护。 ... [详细]
  • 本文详细介绍了Java库中com.badlogic.gdx.scenes.scene2d.Stage类下的mouseMoved()方法,并提供了多个实际应用场景的代码示例,帮助开发者更好地理解和使用这一方法。 ... [详细]
  • 本文探讨了Git与SVN在版本控制上的区别,重点介绍了Git中特有的工作流和文件状态管理机制。 ... [详细]
  • 图神经网络模型综述
    本文综述了图神经网络(Graph Neural Networks, GNN)的发展,从传统的数据存储模型转向图和动态模型,探讨了模型中的显性和隐性结构,并详细介绍了GNN的关键组件及其应用。 ... [详细]
  • 在现代移动应用开发中,尤其是iOS应用,处理来自服务器的JSON数据是一项基本技能。无论是使用Swift还是PHP,有效地解析和利用JSON数据对于提升用户体验至关重要。本文将探讨如何在Swift中优雅地处理JSON,以及PHP中处理JSON的一些技巧。 ... [详细]
  • 多项目环境下的代码复用策略
    在前端开发中,面对多个并行项目的场景,如何有效地实现代码复用成为了一个重要的议题。本文将探讨一种利用npm包管理来实现跨项目组件共享的方法。 ... [详细]
  • 本文详细介绍了Java中com.sun.xml.bind.v2.runtime.XMLSerializer类下的childAsRoot()方法,并提供了多个实际应用的代码示例,帮助开发者更好地理解和使用该方法。 ... [详细]
  • 本文将指导你如何通过自定义配置,使 Windows Terminal 中的 PowerShell 7 更加高效且美观。我们将移除默认的广告和提示符,设置快捷键,并添加实用的别名和功能。 ... [详细]
  • 点击上方“中兴开发者社区”,关注我们每天读一篇一线开发者原创好文DevOps微课系列旨在帮助用户学习DevOps实践。1概述    本文详细介绍一般开发人员使用Gerrit代码评审 ... [详细]
  • 本文提供了详细的步骤,指导用户如何下载并安装 Git 的中文语言包,以提升用户体验。 ... [详细]
  • 本文详细介绍了Keycloak框架中UserRepresentation类下的isEnabled()方法的功能与应用,并通过多个实际代码示例说明其在用户管理中的具体实现。 ... [详细]
  • 本文探讨了如何通过rand7()函数利用拒绝采样的技术来实现rand10()函数。拒绝采样是一种当生成的随机数符合特定条件时,才返回该数的方法。 ... [详细]
  • 本文探讨了在Qt框架下实现TCP多线程服务器端的方法,解决了一个常见的问题:服务器端仅能与最后一个连接的客户端通信。通过继承QThread类并利用socketDescriptor标识符,实现了多个客户端与服务器端的同时通信。 ... [详细]
  • 本文介绍了如何利用snownlp库对微博内容进行情感分析,包括安装、基本使用以及如何自定义训练模型以提高分析准确性。 ... [详细]
author-avatar
840126054贝尔
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有