欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

flutter编写精美的登录页面

程序员文章站 2022-07-06 14:34:27
本文实例为大家分享了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的文字组件和下方的一个横线组件.

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

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