flutter实现发送验证码功能
作者:ulddfhv 发布时间:2023-07-05 19:03:12
标签: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),
),
),
),
],
),
);
}
}
来源:https://blog.csdn.net/ulddfhv/article/details/93435111
0
投稿
猜你喜欢
- 来源:https://www.cnblogs.com/dato/p/7027949.html
- 一、创建字符串创建字符串的方式有很多种,当是常见的一般就三种1. 直接赋值(常用)String str = "hello worl
- 单独使用mybatis是有很多限制的(比如无法实现跨越多个session的事务),而且很多业务系统本来就是使用spring来管理的事务,因此
- 1、Android内存管理机制1.1 Java内存分配模型先上一张JVM将内存划分区域的图程序计数器:存储当前线程执行目标方法执行到第几行。
- 题目:给定一个如下图所示的数字三角形,从顶部出发,在每一结点可以选择移动至其左下方的结点或移动至其右下方的结点,一直走到底层,要求找出一条路
- 1:HttpHelper.javapublic class HttpHelper { //1:标准的Ja
- 最近做了一个项目,其中有一个在线网页交流的需求,好久没写代码了,手都生疏了,于是先写demo练练手,分享到脚本之家平台,以此做个记录,方便自
- 本文实例讲述了Java基于socket实现的客户端和服务端通信功能。分享给大家供大家参考,具体如下:以下代码参考马士兵的聊天项目,先运行Ch
- springmvc的图片上传1.导入相应的pom依赖 <dependency> <groupId>co
- 日志输出是所有系统必备的,很多开发人员可能因为常常使用log4j而忽视了JDK logging模块,两者之间是否有联系?是怎样的联系?JDK
- 在hibernate5中,有了一些新的变动: 新引导 APISpatial/GIS 支持Java 8 支持扩展 AUTO
- 前言痛点:在java开发的过程中,我们经常要面对各种各样的环境,比如开发环境,测试环境,正式环境,而这些环境对项目的需求也不相同。在此之前,
- Viewpager 横向滑动效果系统就自带了很多种,比如这个效果 那如果做成竖屏的这种效果呢 。我百度过很多,效果都不是很好,有的代码特别多
- 结构型设计模式创建型设计模式主要是为了解决创建对象的问题,而结构型设计模式则是为了解决已有对象的使用问题。适配器模式适配器模式比较好理解,因
- 简单的日历实现,只是显示了每一个月,没有显示当天和记事这些功能主要是计算月初是周几,月末是周几,然后相应的显示上一月多少天和下一月多少天。先
- Mybatis 入参方式单个基本类型或 String 参数在 mapper 文件中随便写<select id=""
- 有时候如果想让我们的应用在桌面上创建多个快捷方式,我们可以在Manifest.xml文件中对相应的activity进行声明。<appl
- 引言float和double类型的主要设计目标是为了科学计算和工程计算。他们执行二进制浮点运算,这是为了在广域数值范围上提供较为精确的快速近
- 目录介绍需求来源传统算法问题新算法特点性能数据效果“我”是什么适用范围能用多久★★集成建议★★常规集成大型分布式集成配置变更代码示例运行环境
- 从接收输入值说起在日常的开发应用中,有时候需要直接接收外部设备如键盘等的输入值,而对于这种数据的接收方式,我们一般有三种方法:字节流读取,字