秦军敢死队,地名大全,林碧红违纪被查
本文实例为大家分享了flutter编写精美的登录页面的具体代码，供大家参考，具体内容如下
先看效果图;
源代码已上传到
我们先看一下页面 , 首先这个页面,我们并没有用到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大致相同,不再介绍了,想了解请看源码
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
Android studio开发小型对话机器人app(实例代码)
Android通过Java sdk的方式接入OpenCv的方法
Android 通过cmake的方式接入opencv的方法步骤
Android Studio finish()方法的使用与解决app点击“返回”(直接退出)
Android 进度条 ProgressBar的实现代码(隐藏、出现、加载进度)
网友评论