flutter:一个完整的登陆页

如果路上有坑，就要毫不犹豫的跳下去

登陆页是一个软件的门面。一个完整的登陆页包含账号密码登陆、验证码登陆、注册及忘记密码四个功能，下面从框架开始一步步完成。

踩坑记录：

背景图由于键盘弹起导致图片变形
输入框由于键盘弹起上移，虽然避免了键盘遮挡，但是效果不好

如果你只想看代码，请到页面最下方，有完整代码

搭建环境

1. 封装网络请求库

登陆功能需要实现网络请求的功能，引入dio库来进行网络请求类的封装，需要学习的可以参考pub官网的教程，有中文版哦

dio是一个强大的Dart Http请求库，支持Restful API、FormData、拦截器、请求取消、Cookie管理、文件上传/下载、超时、自定义适配器等…

为了方便使用，Dio提供了一些其它的Restful API, 这些API都是request的别名。

2. 导入持久存储库

shared_preferences 为简单数据提供一个持久的存储。数据被异步地持久化到磁盘。需要注意的一点是，两个平台都不能保证写操作在返回后被持久化到磁盘上，所以这个插件不能用于存储关键数据。

这里主要用于缓存一下token

编写widget

如何搭建程序框架就不在这里介绍了，下面主要讲解登陆页面的搭建

给页面加个背景图

class LoginPage extends StatefulWidget {static final String sName = "login";@override_LoginPageState createState() => _LoginPageState();
}class _LoginPageState extends State<LoginPage> {@overridevoid initState() {super.initState();}@overrideWidget build(BuildContext context) {return new Container(decoration: BoxDecoration(image: DecorationImage(image: AssetImage('static/images/login_back.jpeg'),fit: BoxFit.cover,),),);}
}

最外围的Container在默认情况下会铺满整个屏幕，使用BoxDecoration对container进行装饰。

这里有个坑需要注意一下，一般情况下我们都会用Scaffold 来包装整个页面，因为这个组件提供了一系列非常方便的属性来配置整个页面，但如果我们想要一个背景图，就必须先写一个Container，因为如果使用Scaffold ，就会在键盘弹出的时候导致页面重绘，背景图会受到挤压而变形。

编写页面主体

这时候就可以使用Scaffold模块来写页面了。

@overrideWidget build(BuildContext context) {return new Container(decoration: BoxDecoration(image: DecorationImage(image: AssetImage('static/images/login_back.jpeg'),fit: BoxFit.cover,),),child: Scaffold(resizeToAvoidBottomPadding: false, // 这里需要注意一下backgroundColor: Color.fromARGB(150, 255, 255, 255),body: Container(padding: EdgeInsets.all(40),child: getLoginComp(),),),);}

这里也有一个坑，Scaffold 在键盘弹出的时候，会由于底部的挤压而重绘页面，我们已经避免了背景图的变形，但是 Scaffold 模块内部的组件会在键盘弹出的时候整体向上偏移，这个特性可以解决输入框被键盘遮挡的问题，但是有些人可能不需要这一特性，可以将resizeToAvoidBottomPadding 属性设置为false。

编写用户名及密码输入框

 // 用户名输入框TextField(controller: _usernameController,decoration: InputDecoration(// labelText: "用户名",hintText: "手机号",prefixIcon: Icon(Icons.person), // 前置contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),border: // 椭圆形输入外框OutlineInputBorder(borderRadius: BorderRadius.circular(32.0)),),keyboardType: TextInputType.number, // 弹起的键盘类型inputFormatters: [ // 输入校验，这里只允许输入数字WhitelistingTextInputFormatter(RegExp("[0-9]")),]),/// 密码输入框TextField(controller: _passwordController,decoration: InputDecoration(// labelText: "密码",hintText: "您的登录密码",prefixIcon: Icon(Icons.lock),contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),border: OutlineInputBorder(borderRadius: BorderRadius.circular(32.0)),),obscureText: true,);

验证码输入框

因为我想把验证码按钮放到输入框里，所以使用stack组件进行包裹

Stack(children: <Widget>[TextField(// autofocus: true,keyboardType: TextInputType.number,controller: _verCodeController,decoration: InputDecoration(prefixIcon: Icon(Icons.lock),contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),border:OutlineInputBorder(borderRadius: BorderRadius.circular(32.0)),),),Positioned(right: 5,child: FlatButton(disabledColor: Colors.grey[400],color: Colors.blue,// highlightColor: Colors.transparent,colorBrightness: Brightness.dark,// splashColor: Colors.grey,child: Text(vercodeDelay == 0 ? "获取验证码" : vercodeDelay.toString() + 's',style: TextStyle(fontSize: 12),),shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)),onPressed: vercodeDelay == 0? () {onGetVerification();}: null,),)],);

完整的登陆模块页面如下：

/// 登陆模块getLoginComp() {return Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[Text('Welcome',style: TextStyle(fontSize: 32,),),SizedBox(height: 32,),TextField(// autofocus: true,controller: _usernameController,decoration: InputDecoration(// labelText: "用户名",hintText: "手机号",prefixIcon: Icon(Icons.person),contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),border:OutlineInputBorder(borderRadius: BorderRadius.circular(32.0)),),keyboardType: TextInputType.number,inputFormatters: [WhitelistingTextInputFormatter(RegExp("[0-9]")),]),SizedBox(height: 12,),loginMode == 'login' ? getPasswordComp() : getVerificationComp(),SizedBox(height: 32,),SizedBox(width: double.infinity,height: 40,child: FlatButton(color: Colors.blue,// highlightColor: Colors.transparent,colorBrightness: Brightness.dark,// splashColor: Colors.grey,child: Text("登陆",style: TextStyle(fontSize: 20),),shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)),onPressed: () {onLogin();},),),Row(mainAxisAlignment: MainAxisAlignment.spaceBetween,children: <Widget>[FlatButton(color: Colors.transparent,child: Text(loginMode == 'login' ? "验证码登陆" : "账号密码登陆",style: TextStyle(fontSize: 16, color: Colors.blue),),onPressed: () {onChangeLoginMode();},),FlatButton(color: Colors.transparent,child: Text("忘记密码",style: TextStyle(fontSize: 16, color: Colors.blue),),onPressed: () {},),],)],);}

后续补充了账号登陆和验证码登陆的切换模式，完整代码如下：

class LoginPage extends StatefulWidget {static final String sName = "login";@override_LoginPageState createState() => _LoginPageState();
}class _LoginPageState extends State<LoginPage> {/// 定义登陆模式：账号密码登陆或者String loginMode = 'login';/// 定义验证码按钮被点击后的延时int vercodeDelay = 0;Timer _timer;TextEditingController _usernameController = TextEditingController();TextEditingController _passwordController = TextEditingController();TextEditingController _verCodeController = TextEditingController();@overridevoid initState() {super.initState();}@overrideWidget build(BuildContext context) {return new Container(decoration: BoxDecoration(image: DecorationImage(image: AssetImage('static/images/login_back.jpeg'),fit: BoxFit.cover,),),child: Scaffold(resizeToAvoidBottomPadding: false, // 就是这里backgroundColor: Color.fromARGB(150, 255, 255, 255),body: Container(padding: EdgeInsets.all(40),child: getLoginComp(),),),);}getPasswordComp() {return TextField(controller: _passwordController,decoration: InputDecoration(// labelText: "密码",hintText: "您的登录密码",prefixIcon: Icon(Icons.lock),contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),border: OutlineInputBorder(borderRadius: BorderRadius.circular(32.0)),),obscureText: true,);}/// 登陆模块getLoginComp() {return Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[Text('Welcome',style: TextStyle(fontSize: 32,),),SizedBox(height: 32,),TextField(// autofocus: true,controller: _usernameController,decoration: InputDecoration(// labelText: "用户名",hintText: "手机号",prefixIcon: Icon(Icons.person),contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),border:OutlineInputBorder(borderRadius: BorderRadius.circular(32.0)),),keyboardType: TextInputType.number,inputFormatters: [WhitelistingTextInputFormatter(RegExp("[0-9]")),]),SizedBox(height: 12,),loginMode == 'login' ? getPasswordComp() : getVerificationComp(),SizedBox(height: 32,),SizedBox(width: double.infinity,height: 40,child: FlatButton(color: Colors.blue,// highlightColor: Colors.transparent,colorBrightness: Brightness.dark,// splashColor: Colors.grey,child: Text("登陆",style: TextStyle(fontSize: 20),),shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)),onPressed: () {onLogin();},),),Row(mainAxisAlignment: MainAxisAlignment.spaceBetween,children: <Widget>[FlatButton(color: Colors.transparent,child: Text(loginMode == 'login' ? "验证码登陆" : "账号密码登陆",style: TextStyle(fontSize: 16, color: Colors.blue),),onPressed: () {onChangeLoginMode();},),FlatButton(color: Colors.transparent,child: Text("忘记密码",style: TextStyle(fontSize: 16, color: Colors.blue),),onPressed: () {},),],)],);}/// 验证码模块getVerificationComp() {return Stack(children: <Widget>[TextField(// autofocus: true,keyboardType: TextInputType.number,controller: _verCodeController,decoration: InputDecoration(prefixIcon: Icon(Icons.lock),contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),border:OutlineInputBorder(borderRadius: BorderRadius.circular(32.0)),),),Positioned(right: 5,child: FlatButton(disabledColor: Colors.grey[400],color: Colors.blue,// highlightColor: Colors.transparent,colorBrightness: Brightness.dark,// splashColor: Colors.grey,child: Text(vercodeDelay == 0 ? "获取验证码" : vercodeDelay.toString() + 's',style: TextStyle(fontSize: 12),),shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)),onPressed: vercodeDelay == 0? () {onGetVerification();}: null,),)],);}/// 获取验证码onGetVerification() async {if (vercodeDelay != 0) {return;}String phone = '18515597305';// String phone = _usernameController.text;if (!CommonUtils.isTelphone(phone)) {return;}setState(() {vercodeDelay = 60;startCountdownTimer();});// var res = await NetUtils.getVercode(phone);}/// 变更登陆模式onChangeLoginMode() {if (loginMode == 'login') {this.setState(() {loginMode = 'Verification';});} else {this.setState(() {loginMode = 'login';});}}/// 账号密码登陆onLogin() async {String phone = _usernameController.text;String password = _passwordController.text;if (phone == '' || phone.length != 11) {return;}if (password == '' || password.length < 6) {return;}if (loginMode == 'login') {Map param = {'phone': phone,'password': password,};Map res = await NetUtils.login(param);if (res['code'] == 200) {Navigator.of(context).pushReplacementNamed("home");}return;}var res = await NetUtils.vercodeLogin(password);if (res['code'] == 200) {Navigator.of(context).pushReplacementNamed("home");}}/// 倒计时void startCountdownTimer() {const oneSec = const Duration(seconds: 1);var callback = (timer) => {setState(() {if (vercodeDelay < 1) {_timer.cancel();} else {vercodeDelay = vercodeDelay - 1;}})};_timer = Timer.periodic(oneSec, callback);}@overridevoid dispose() {super.dispose();if (_timer != null) {_timer.cancel();}}
}