Flutter劫富济贫计划——flutter页面集合

本计划 就是帮助 大家学习Flutter 的计划， 在这里我会分享出一些APP中常用到的页面，记得点击关注~

登录页面

效果截图

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';

import 'package:project/plugins/Plugins.dart';

// import 'package:project/plugins/timer.dart';

class LoginPage extends StatefulWidget {
  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {

  TextEditingController  _phone = new TextEditingController();        // 手机号、验证码
  TextEditingController  _verification = new TextEditingController();        // 手机号、验证码
  Timer _timer;
  int _countdownTime = 0;
  bool _isget;                      // 验证码Widget
  bool _verification_available;     // 输入框是否可用

  Widget getVerification(){
    if(_isget){
      return Text('获取验证码');
    }else{
      return Text('${_countdownTime}秒后获取');
    }
  }

 // 倒计时
  void startCountdownTimer() {
   
      const oneSec = const Duration(seconds: 1);
      var callback = (timer) => {
        setState(() {
        if (_countdownTime < 1) {
          _timer.cancel();
          setState(() {
           _isget = true; 
          });
        } else {
          _countdownTime = _countdownTime - 1;    // 倒计时 自减
        }
        })
    };
    _timer = Timer.periodic(oneSec, callback);
}
  

  

  // 初始化
  @override
  void initState() {
    super.initState();
    // _phone.addListener((){
    //   print(_phone.text);
    // });
    _verification_available = false;
    _isget = true;
  }

  // 销毁时
  @override
  void dispose() {
  super.dispose();
  if (_timer != null) {
    _timer.cancel();
  }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // appBar: AppBar(
      //   backgroundColor:Colors.white,
      //   leading:IconButton(
      //     icon: Icon(
      //       Theme.of(context).platform == TargetPlatform.iOS ? Icons.arrow_back_ios : Icons.arrow_back,
      //       color: Theme.of(context).accentColor,
      //     ),
      //     onPressed: (){
      //       Navigator.of(context).pop();
      //     },
      //   )
      // ),
      body: Container(
        width:double.infinity,
        margin: EdgeInsets.symmetric(horizontal: 25.0),
        padding: EdgeInsets.fromLTRB(0, 150.0, 0, 0),
        child: Column(
          children: <Widget>[
            Container(
              child: Text('欢迎登录',style: TextStyle(
                fontSize: 30.0,
                fontWeight: FontWeight.bold
              )),
              margin: EdgeInsets.fromLTRB(0, 0, 0, 40.0),
            ),
            TextField(
              // autofocus: true,
              decoration: InputDecoration(
                hintText: "请输入手机号",
                // errorText: ,
              ),
              maxLength: 11,
              controller: _phone,         // 表示默认值
              onChanged:(value){
                _phone.text = value;
                //  判断如果手机号可用才能进行验证码操作
                if(Plugins.isChinaPhoneLegal(value)){
                  setState(() {
                    _verification_available = true;
                  });
                }else{
                  setState(() {
                    _verification_available = false;
                  });
                }
                //  将光标一直置于末尾
                 _phone.selection = TextSelection.fromPosition(
                  TextPosition(offset: _phone.text.length)
                );
              },
              onSubmitted: (val){
                print(_phone.text);
                print("点击了键盘上的动作按钮，当前输入框的值为：${val}");
              },
              keyboardType:TextInputType.number
            ),
            SizedBox(height: 20.0),
            Row(
              children: <Widget>[
                Expanded(
                  child: TextField(
                    decoration: InputDecoration(
                      hintText: '输入验证码',
                    ),
                    enabled:_verification_available ? true : false,
                    controller: _verification,
                    onChanged: (val){
                      _verification.text = val;
                      _verification.selection = TextSelection.fromPosition(
                        TextPosition(offset: _verification.text.length)
                      );
                    },
                    onSubmitted: (val){
                      print("点击了键盘上的动作按钮，当前输入框的值为：${val}");
                    },
                    keyboardType:TextInputType.number
                  ),
                  flex: 2,
                ),
                Expanded(
                  child: RaisedButton(
                    child: getVerification(),
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(25)
                    ),
                    color: Theme.of(context).accentColor,
                    textColor: Colors.white,
                    onPressed: (){
                      
                      _verification_available ? 
                      Fluttertoast.showToast(
                        msg: '手机号是${_phone.text}'
                      )
                      :
                      Fluttertoast.showToast(
                        msg: '请输入正确的手机号'
                      );
                      if (_verification_available && _countdownTime == 0) {
                        setState(() {
                          _countdownTime = 60;
                          _isget = false;
                        });
                        //开始倒计时
                        startCountdownTimer();
                        }
                      // print('手机号是${_phone.text}, 验证码是${_verification.text}');
                    },
                  ),
                  flex: 1,
                )
              ],
            ),
            SizedBox(height: 30.0),
            Row(
              children: <Widget>[
                Expanded(
                  child: Container(
                    height: 50.0,
                    child: RaisedButton(
                      child: Text('登录',style: TextStyle(),),
                      color: Theme.of(context).accentColor,
                      textTheme: ButtonTextTheme.primary,
                      onPressed: () {
                        _verification_available ? 
                        Fluttertoast.showToast(
                          msg: '手机号是${_phone.text}, 验证码是${_verification.text}'
                        )
                        :
                        Fluttertoast.showToast(
                          msg: '请输入正确手机号或输入正确验证码'
                        );
                      },
                      elevation: 10,
                      shape: RoundedRectangleBorder(
                        borderRadius:BorderRadius.circular(10)
                      ),
                    ),
                  ),
                )
              ],
            )
          ],
        ),
      ),
    );
  }


  
}