flutter编写精美的登录页面
本文实例为大家分享了flutter编写精美的登录页面的具体代码,供大家参考,具体内容如下
先看效果图;
源代码已上传到github
我们先看一下页面 , 首先这个页面,我们并没有用到AppBar,当然也就没有自带返回功能.
然后下面有个Login的文字以及一条横线.
屏幕中上方是填写帐号以及密码的2个输入框,密码输入框有隐藏和显示密码的按钮.
下方是登录按钮 以及其他登录方式.
看一下主体布局:
return Scaffold( body: Form( key: _formKey, child: ListView( padding: EdgeInsets.symmetric(horizontal: 22.0), children: <Widget>[ SizedBox( height: kToolbarHeight, ),buildTitle(), buildTitleLine(), SizedBox(height: 70.0), buildEmailTextField(), SizedBox(height: 30.0), buildPasswordTextField(context), buildForgetPasswordText(context), SizedBox(height: 60.0), buildLoginButton(context), SizedBox(height: 30.0), buildOtherLoginText(), buildOtherMethod(context), buildRegisterText(context), ], )));
页面在一个Scaffold中包裹着, 然后整体布局是纵向的,于是我们用ListView来做外层控件,因为是有输入框,所以我们又用了Form来包裹住整体.
标题部分
buildTitle(), buildTitleLine(),
分别实现了Login的文字组件和下方的一个横线组件.
Login:
Padding( padding: EdgeInsets.all(8.0), child: Text( 'Login', style: TextStyle(fontSize: 42.0), ), );
横线:
Padding( padding: EdgeInsets.only(left: 12.0, top: 4.0), child: Align( alignment: Alignment.bottomLeft, child: Container( color: Colors.black, width: 40.0, height: 2.0, ), ), );
可以看到,都是用Padding做外层组件,前者包裹了一个Text,后者包裹了一个Container.
输入框
TextFormField buildPasswordTextField(BuildContext context) { return TextFormField( onSaved: (String value) => _password = value, obscureText: _isObscure, validator: (String value) { if (value.isEmpty) { return '请输入密码'; } },decoration: InputDecoration( labelText: 'Password', suffixIcon: IconButton( icon: Icon( Icons.remove_red_eye, color: _eyeColor, ), onPressed: () { setState(() { _isObscure = !_isObscure; _eyeColor = _isObscure ? Colors.grey : Theme.of(context).iconTheme.color; }); })), ); } TextFormField buildEmailTextField() { return TextFormField( decoration: InputDecoration( labelText: 'Emall Address', ), validator: (String value) {var emailReg = RegExp( r"[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?"); if (!emailReg.hasMatch(value)) { return '请输入正确的邮箱地址'; } }, onSaved: (String value) => _email = value, ); }
用TextFormField 来实现输入框, 帐号我们规定是邮箱,所以用了正则表达式来验证:
var emailReg = RegExp( r"[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?");
如果不符合,在提交的时候会给出相应的提示.
密码输入那里使用了判空的方法,多了一个显示/隐藏密码的按钮:
decoration: InputDecoration( labelText: 'Password', suffixIcon: IconButton( icon: Icon( Icons.remove_red_eye, color: _eyeColor, ), onPressed: () { setState(() { _isObscure = !_isObscure; _eyeColor = _isObscure ? Colors.grey : Theme.of(context).iconTheme.color; }); })),
可以看到在decotation中设置,suffixIcon是在后面加一个图标,这里给它一个点击方法是改变是否显示密码的,并更改图标的颜色.
登录
Align buildLoginButton(BuildContext context) { return Align( child: SizedBox( height: 45.0, width: 270.0, child: RaisedButton( child: Text( 'Login', style: Theme.of(context).primaryTextTheme.headline, ), color: Colors.black, onPressed: () { if (_formKey.currentState.validate()) { ///只有输入的内容符合要求通过才会到达此处 _formKey.currentState.save(); //TODO 执行登录方法 print('email:$_email , assword:$_password'); } }, shape: StadiumBorder(side: BorderSide()), ), ), ); }
登录按钮,是一个RaiseButton,点击的时候,我们判断输入框内容,符合条件会执行登录方法.
其他帐号登录
ButtonBar buildOtherMethod(BuildContext context) { return ButtonBar( alignment: MainAxisAlignment.center, children: _loginMethod .map((item) => Builder( builder: (context) { return IconButton( icon: Icon(item['icon'], color: Theme.of(context).iconTheme.color), onPressed: () { //TODO : 第三方登录方法 Scaffold.of(context).showSnackBar(new SnackBar( content: new Text("${item['title']}登录"), action: new SnackBarAction( label: "取消", onPressed: () {}, ), )); }); }, )) .toList(), ); }
其他帐号登录,这里我以facebook,twitter和google为例来实现的
ButtonBar是一个按钮的组合,我们放了3个IconButton, 并在list中定义了支持的登录方式. 点击图标实现对应的登录方法.
其他都是些text使用,跟login大致相同,不再介绍了,想了解请看源码.github
以上就是本文的全部内容,希望对大家的学习有所帮助
您可能感兴趣的文章:
- HBuilder+MUI编写一个登录页面(Ajax交互)
- 优秀网页设计:25个精美的登录页面设计案例
- 优秀网页设计:25个精美的登录页面设计案例
- bootstrap flask登录页面编写实例
- 国外30款设计精美的网站登录页面模板
- 编写一个jsp程序,实现用户登录,当用户输入的用户或密码错误时,将页面重定向到错误提示页,并在该页面显示30秒后 自动回到用户登录界面
- ajax编写简单的登录页面
- HBuilder 入门(5) / 编写一个登录页面 - Ajax交互
- HBuilder 入门(5) 编写一个登录页面 - Ajax交互
- ReactNative基础(一)编写一个登录页面
- 利用ajax编写登录页面
- php使用curl模拟登录后采集页面的例子
- SilverLight页面刷新后退回登录页面
- 解决iframe窗体丢失Session时登录窗口显示在子页面的问题
- Exchange Server 2007 登录页面定制
- Swift 登录页面跳转,条件判断 ,页面跳转
- 教程3:jsp和servlet配合的简单登录页面login.jsp
- js判断登录与否并确定跳转页面的方法
- magento登录后返回当前页面
- mvc3中正确处理ajax访问需要登录的页面