【Flutter】表单 - Password

参照
【Flutter】表单 - Input

首先创建一个密码框

TextField(
  controller: _passwordControl,
  obscureText: true,
  decoration: InputDecoration(
    contentPadding: const EdgeInsets.all(15.0),
    hintText: '请输入密码',
    border: OutlineInputBorder(
      borderRadius: BorderRadius.all(
        Radius.circular(28), //边角为30
      ),
      borderSide: BorderSide(
        color: Colors.amber, //边线颜色为黄色
        width: 2, //边线宽度为2
      ),
    ),
  )
)

设置右侧的小眼睛图标并绑定事件

return TextField(
    controller: _passwordControl,
    obscureText: _isShow,
    decoration: InputDecoration(
      contentPadding: const EdgeInsets.all(15.0),
      hintText: '请输入密码',
      suffix: GestureDetector(
        onTap: _showPassword,
        child: Icon(
          Icons.remove_red_eye,
          color: !_isShow ? Colors.red : Colors.grey,
        )
      ),
      border: OutlineInputBorder(
        borderRadius: BorderRadius.all(
          Radius.circular(28), //边角为30
        ),
        borderSide: BorderSide(
          color: Colors.amber, //边线颜色为黄色
          width: 2, //边线宽度为2
        ),
      ),
    )
);
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,879评论 1 45
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,271评论 4 61
  • 表单操作 表单为页面的主要组成部分,其中包含许多的表单控件。用户通过控件提供数据并提交给服务器,服务器则做出相应的...
    Rella7阅读 579评论 0 0
  • 很多父母都说自己工作忙,没有时间陪伴孩子,更没有时间教孩子,其实教孩子也并没有我们想象中那么困难,日常生活中的每一...
    小芸老师yun阅读 857评论 0 3
  • 01 前两个星期回老家,在车站遇到小进。他是我的小学同学,春节见他还是个白白胖胖的小伙子,这次见他,黑了,瘦了。原...
    愈姑娘阅读 4,483评论 1 24