flutter编写精美的登录页面编写精美的登录页面
主要为大家详细介绍了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
来包裹住整体.