flutter發(fā)送驗證碼功能

一個發(fā)送驗證碼的需求:包括限制文本框輸入長度和只允許輸入數(shù)字

創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司一直秉承“誠信做人,踏實做事”的原則,不欺瞞客戶,是我們最起碼的底線! 以服務(wù)為基礎(chǔ),以質(zhì)量求生存,以技術(shù)求發(fā)展,成交一個客戶多一個朋友!專注中小微企業(yè)官網(wǎng)定制,成都網(wǎng)站建設(shè)、做網(wǎng)站,塑造企業(yè)網(wǎng)絡(luò)形象打造互聯(lián)網(wǎng)企業(yè)效應(yīng)。

按慣例 先上圖:

flutter發(fā)送驗證碼功能

class MyBody extends StatefulWidget {
 @override
 _MyBodyState createState() => _MyBodyState();
}
 
class _MyBodyState extends State<MyBody> {
 bool isButtonEnable=true;  //按鈕狀態(tài) 是否可點擊
 String buttonText='發(fā)送驗證碼'; //初始文本
 int count=60;      //初始倒計時時間
 Timer timer;      //倒計時的計時器
 TextEditingController mController=TextEditingController();
 
 void _buttonClickListen(){
 setState(() {
  if(isButtonEnable){   //當(dāng)按鈕可點擊時
  isButtonEnable=false; //按鈕狀態(tài)標記
  _initTimer();
 
  return null;   //返回null按鈕禁止點擊
  }else{     //當(dāng)按鈕不可點擊時
//  debugPrint('false');
  return null;    //返回null按鈕禁止點擊
  }
 });
 }
 
 
 void _initTimer(){
 timer = new Timer.periodic(Duration(seconds: 1), (Timer timer) {
  count--;
  setState(() {
  if(count==0){
   timer.cancel();    //倒計時結(jié)束取消定時器
   isButtonEnable=true;  //按鈕可點擊
   count=60;     //重置時間
   buttonText='發(fā)送驗證碼';  //重置按鈕文本
  }else{
   buttonText='重新發(fā)送($count)'; //更新文本內(nèi)容
  }
  });
 });
 }
 
 
 @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('重新發(fā)送 (${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),
    ),
   ),
   ),
  ],
  ),
 );
 }
}

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。

分享標題:flutter發(fā)送驗證碼功能
本文URL:http://muchs.cn/article40/gepjeo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供關(guān)鍵詞優(yōu)化虛擬主機、移動網(wǎng)站建設(shè)、網(wǎng)站改版網(wǎng)站內(nèi)鏈、網(wǎng)站設(shè)計

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)

外貿(mào)網(wǎng)站建設(shè)