Flutter-發送短信驗證碼


import 'dart:async'; import 'package:flutter/material.dart';
import 'package:flutter/services.dart'; class Create extends StatefulWidget {
@override
_CreateState createState() => _CreateState();
} class _CreateState extends State<Create> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('手機帳號註冊'),
),
body: Center(
child: MyBody(),
),
);
}
} 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();
TextEditingController phoneController=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: Column(
children: <Widget>[
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: phoneController,
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),
),
),),
),
],
),
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('手機號:${phoneController.text},驗證碼:${mController.text}');
},
shape: StadiumBorder(side: BorderSide.none),
color: Color(0xff44c5fe),
child: Text(
'註冊',
style: TextStyle(color: Colors.white,fontSize: 15),
),
),
),
],
),
);
}
}
Flutter-發送短信驗證碼的更多相关文章
- 用戶登陸。防SQL注入,驗證碼不區分大小寫
if (string.Compare(TBCheckCode.Text, Session["CheckCodeI"].ToString(), true) == 0) ...
- 用戶登陸。防SQL注入,驗證碼不區分大小寫。。
if (string.Compare(TBCheckCode.Text, Session["CheckCodeI"].ToString(), true) == 0) ...
- Android--发送短信,并且通知发送方
1.发送短信涉及到权限,我们需要把权限加上 2.当我们发送短信时,不管发送是否成功,接收方是否接收到,系统都会发送广播 3.这时我们注册广播去接收一下就可以了 4.布局文件很简单,里面就两个EditT ...
- sim808模块收发送短信
一,简介 SIM 808发送短信分text模式和PDU模式.text模式已ascii码发送短信,这种模式比较简单,发送命令AT+CMGF=1就可以发送短信,而PDU模式比较复杂,首先发送命令AT+CM ...
- android-发送短信
- iOS-发送短信验证码倒计时
/** 发送手机验证码 */ -(void)startSenderYzmMessage{ __block ; //倒计时时间 dispatch_queue_t queue = dispatch_get ...
- .Net core----使用容联云短信推送
一直在忙于写接口,也没有时间去好好的整理的一片文档,写一篇经常的用到的短信推送案例 还是比较喜欢干货 作为有个程序员 有时候复制粘贴习惯了 实在的还是比较实在 比如能用复制解决的为什么不用复制 ...
- [麦先生]Laravel框架实现发送短信验证
今天在做到用户注册和个人中心的安全管理时,我借助实现第三方短信平台在Laravel框架中进行手机验证的设置; 由于我们做的是一个为客户提供医疗咨询和保健品网站,所以对客户个人隐私的保护显得尤为重要, ...
- IOS程序开发中-跳转到 发送短信界面 实现发短信
前言:我发现我标题取的不好,谁帮我取个承接上下文的标题?评论一下,我改 项目需求:在程序开发中,我们需要在某个程序里面发送一些短信验证(不是接收短信验证,关于短信验证,传送门:http://www.c ...
随机推荐
- WPF C# 创建缩略图
不太精确的方法: public bool ThumbnailCallback() { return false; } private void CreateThumb(int toWidth) { S ...
- hashMap与 hashTable , ArrayList与linkedList 的区别(详细)
ArrayList 采用的是数组形式来保存对象的,这种方式将对象放在连续的位置中,所以最大的缺点就是插入删除时非常麻烦LinkedList 采用的将对象存放在独立的空间中,而且在每个空间中还保存下一个 ...
- Cloudera-JDBC-Driver-for-Apache-Hive
Cloudera-JDBC-Driver-for-Apache-Hive-Install-Guide.pdf https://github.com/FlowerBirds/flowerbirds.gi ...
- Canvas入门03-绘制弧线和圆
绘制弧线的API: context.arc(centerx:number, centery: number, radius: number, startAngle: number, endAngle: ...
- vue 格式化时间的插件库
格式化时间的插件库 点击进入 moment.js网址 ,在这里可以找到需要引入的script标签 点击进入 moment.js的文档 在文档中可以找到对应的格式和例子 此文来源于: https://w ...
- 【嵌入式 Linux文件系统】如何使用NFS文件系统
(1)内核配置 取消选项 General setup-->Initial RAM filesystem and RAM disk (initramfs/initrd) support 进入Fil ...
- [19/06/06-星期四] CSS基础_盒子模型
一.盒子模型(框模型.盒模型) CSS处理网页时,它认为每个元素都在一个不可见的矩形盒子里. 为什么想象成盒子模型?因为把所有元素想象成盒子,那么我们对网页的布局就相当于摆放盒子.我们只需要把相应的盒 ...
- 创建React脚手架
node版本10.14.2 下载地址 如果是其版本的话会出错 css-loader 会不兼容 主要是8.x的版本不兼容 npm install -g create-react-app 全局安装 cre ...
- express 实现我猜你喜欢功能
工具:利用cookie-parser中间件; 原理: 每次访问某一具体的文章,就表明可能客户端对这类文章感兴趣, 将这类文章的标签添加到cookie里,字段是like; 然后退回到含有 我猜你喜欢模块 ...
- FHJ学长的心愿 QDUOJ 数论
FHJ学长的心愿 原题链接,点我进去 题意 给你一个数N,让你求在\[C^{0}_{n} \ C^{1}_{n}\ C^{2}_{n}\ \dots \ C^{n}_{n}\]中有几个组合数是奇数. ...