美文网首页
Flutter密码登录

Flutter密码登录

作者: _xiangpan | 来源:发表于2020-06-15 16:06 被阅读0次

刚开始做Flutter项目,记录遇到的坑


一、先上效果图

效果图

二、遇到问题

 1、Row中不能直接添加TextField
 2、TextField 输入限制
 3、TextField 密码明文与密文显示

三、解决

1)在TextField 外面包裹Expanded

 Row(
     children: <Widget>[  
          Expanded(
            child: TextField(
                ......
            )
        )
    ]
)

2)输入限制

   inputFormatters: [
         WhitelistingTextInputFormatter(RegExp("[^\u4e00-\u9fa5]")),
         LengthLimitingTextInputFormatter(16),],

3)密码明文与密文显示

  obscureText: !isCanSee //更改false/true
  // 图标显示
   IconButton(
              iconSize: ScreenUtil().setHeight(20),
              icon: Image.asset(
                  Utils.getImgPath(isCanSee?'see':"nosee")),
              onPressed: () {
                setState(() {
                  isCanSee = !isCanSee;
                });
              })

4) 密码输入框完整代码

Widget buildPsw() {
    return Container(
      alignment: Alignment.centerLeft,
      padding: EdgeInsets.only(left: ScreenUtil().setHeight(20)),
      height: ScreenUtil().setHeight(90),
      decoration: BoxDecoration(
          color: Colours.white,
          borderRadius: BorderRadius.circular(ScreenUtil().setHeight(60)),
          border: Border.all(color: Color(0xffffd300))),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Expanded(
            child: TextField(
                controller: pswEditer,
                keyboardType: TextInputType.visiblePassword,
                focusNode: _nodeText1,
                maxLength: 16,
                style: TextStyle(
                    fontSize: ScreenUtil().setSp(28), color: Colours.darkGray),
                decoration: InputDecoration(
                  hintText: '请填写密码',
                  counterText: "",
                  hintStyle: TextStyle(color: Colours.gray),
                  border: InputBorder.none,
                  isDense: true,
                  contentPadding: EdgeInsets.zero,
                ),
                inputFormatters: [
                  WhitelistingTextInputFormatter(
                      RegExp("[^\u4e00-\u9fa5]")),
                  LengthLimitingTextInputFormatter(16),
                ],
                obscureText: !isCanSee),
          ),
          IconButton(
              iconSize: ScreenUtil().setHeight(20),
              icon: Image.asset(
                  Utils.getImgPath(isCanSee?'see':"nosee")),
              onPressed: () {
                setState(() {
                  isCanSee = !isCanSee;
                });
              })

        ],
      ),
    );
  }


如有意见和建议,及时沟通。

相关文章

  • Flutter密码登录

    刚开始做Flutter项目,记录遇到的坑 一、先上效果图 二、遇到问题 三、解决 1)在TextField 外面包...

  • Flutter项目实战-登录注册

    第一个flutter实战项目-登录注册模块包含了登录、注册和找回密码三个界面实现,具体效果见下图。 几个技术点: ...

  • SSH 密码与秘钥登录方式

    1.密码登录 密码登录顾名思义极其简单,登录之前需要在ssh服务器上有相应的用户名与登录密码。 密码登录命令行:s...

  • 原型设计界面

    登录注册界面:账号,密码输入框,密码可以选择隐藏,忘记密码可以选择找回密码。点击登录后,可以选择各种登录结果查看对...

  • 简书,你要吓死朕吗?

    要求重新登录。 以前微信直接登录,现在登录不了。 密码就是微信密码,输入微信密码登录不了。 吓朕一头冷汗。 幸好幸...

  • geoserver修改admin用户密码

    默认登录账号/密码为admin /geoservcer 修改admin的登录密码如下:

  • mac 忘记登录密码

    虽然觉得自己没有忘记登录密码,包括密码提示都没有问题,可是在登录界面,就是登录不进去,提示密码错误,没办法,在密码...

  • Mac使用ssh密钥登录Linux

    ssh登录Linux通常有两种方法:用户名密码登录、用户名密钥登录;使用用户名密码登录每次都要输入密码,相当麻烦,...

  • 登录注册修改密码

    1.为什么要设计登录注册修改密码模块 2.登录注册修改密码模块分类 3.如何设计登录注册修改密码模块 4.登录注册...

  • useradd

    添加用户 sudo 免密码 参考链接 禁止密码登录 禁止root 登录 只允许指定用户登录 重启sshd

网友评论

      本文标题:Flutter密码登录

      本文链接:https://www.haomeiwen.com/subject/xkqhxktx.html