flutter编写精美的登录页面

2019-12-12 00:08:14

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了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的文字组件和下方的一个横线组件.

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：Flutter 侧滑栏及城市选择UI的实现方法

下一篇：Flutter实现App功能引导页