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

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大致相同,不再介绍了,想了解请看源码

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