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
以上就是本文的全部内容,希望对大家的学习有所帮助。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Canvas系列(16):实战-小球与斜面碰撞
- Three.js教程(3):场景
- Three.js教程(4):相机
- 使用GithubActions自动部署应用到自己的服务器(ECS)
- Nuxt项目给script标签添加crossorigin属性
- Canvas系列(12):动画高级
- Canvas系列(13):实战--星空连线图
- VSCode支持Vue自动保存格式化的配置
- 构造方法或new返回该对象
- 使用Node在浏览器打开某个网页
- 快应用初探--把个人博客封装成快应用
- 10分钟开发一个npm全局依赖包(上)
- 10分钟开发一个npm全局依赖包(下)
- Canvas系列(3):路径与状态
- Canvas系列(4):线条操作