android开发分享flutter编写精美的登录页面-计算机技术网

android开发分享flutter编写精美的登录页面实例为大家分享了flutter编写精美的登录页面的具体代码，供大家参考，具体内容如下

先看效果图;

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的文字组件和下方的一个横线组件.

  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开发分享flutter编写精美的登录页面的全部内容，希望对大家的学习有所帮助，也希望大家多多支持<计算机技术网(www.ctvol.com)!!>。

本文来自网络收集，不代表计算机技术网立场，如涉及侵权请联系管理员删除。

ctvol管理联系方式QQ:251552304

本文章地址：https://www.ctvol.com/addevelopment/900785.html

android开发分享flutter编写精美的登录页面

精彩推荐