首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在flutter应用中点击后缀图标时,逐一显示密码和确认密码?

在Flutter应用中,可以通过使用TextFormField组件和IconButton组件来实现点击后缀图标时逐一显示密码和确认密码。

首先,创建两个变量来控制密码的显示状态:

代码语言:txt
复制
bool _obscurePassword = true;
bool _obscureConfirmPassword = true;

然后,在TextFormField的属性中设置suffixIcon为IconButton,并根据密码显示状态来切换图标:

代码语言:txt
复制
TextFormField(
  obscureText: _obscurePassword,
  decoration: InputDecoration(
    labelText: 'Password',
    suffixIcon: IconButton(
      icon: Icon(_obscurePassword ? Icons.visibility : Icons.visibility_off),
      onPressed: () {
        setState(() {
          _obscurePassword = !_obscurePassword;
        });
      },
    ),
  ),
),

同样的方式,可以为确认密码字段添加后缀图标:

代码语言:txt
复制
TextFormField(
  obscureText: _obscureConfirmPassword,
  decoration: InputDecoration(
    labelText: 'Confirm Password',
    suffixIcon: IconButton(
      icon: Icon(_obscureConfirmPassword ? Icons.visibility : Icons.visibility_off),
      onPressed: () {
        setState(() {
          _obscureConfirmPassword = !_obscureConfirmPassword;
        });
      },
    ),
  ),
),

这样,当用户点击密码或确认密码字段的后缀图标时,密码的显示状态会逐一切换,实现显示和隐藏密码的功能。

关于Flutter的更多信息和相关产品,你可以访问腾讯云的Flutter开发者中心:https://cloud.tencent.com/developer/section/1489893

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Flutter 专题】08 小小优化【登录】页面

和尚刚开始在编辑内容块 content ,以为涉及的 widget 元素不多,所占不会超过屏幕,所以根 widget 使用的是 body: new Container(),但是在点击文本框 TextField...优化二:文本框 TextField 尾部添加【清空数据】图标 方式一:使用层布局 Stack,在输入文本框 TextField 上一层添加一个【清空数据】图标; new Padding( padding...{ _phonecontroller.clear(); }, ), ], ), ), 方式二:使用文本框 TextField 自带的属性【后缀图标...优化四:根据输入文本框添加【温馨提示】对话框 Flutter 提供了创建和显示弹出对话框的功能,:showDialog/showMenu/showModalBottomSheet 等,和尚采用的是对话框方式...Tips: 对话框 barrierDismissible: false, 属性,若为false,点击对话框周围,对话框不会关闭;若为true,点击对话框周围,对话框自动关闭。 ? ? ?

1.5K51

Flutter | 常用组件

一样 另外,所有的 Material 库的按钮都有如下的相同点: 1,按下都会有 “水波纹动画” 2,都有一个 onPressed 属性来设置点击事件的回调,若没有该回调则按钮会处于禁用状态,禁用状态不响应用点击...,使用 FadeInImage 之后会在图片的加载过程显示一个占位符,在图片加载完成之后显示淡入 ICON 在 Flutter ,可以直接使用 字体图标,它是将图标做成字体文件,然后通过指定不同的字符而现实不同的图片...而在 iconfont ,只是将位码对应的字形做成了图标,所以不同的字符最终就会渲染成不同的图标Flutter ,iconfont 图片相比有如下优势 1,体积小 2,矢量的图标,放大不会影响清晰度...3,可以应用文本样式,可以像文本一样改变字体图标颜色,大小对齐等 4,可以通过 TextSpan 和文本混用 使用 Material Design 字体图标 Flutter 默认包含了一套 Material...,但这种需要提供每个图标的码点,这点对开发者并不友好,所以 Flutter 封装了 IconData Icon 来专门显示字体图标,上面栗子可使用如下方式实现 Row( mainAxisAlignment

11.4K30
  • Flutter 密码锁定屏幕

    在任何情况下,最新的Andriod先决条件所指出的那样,您需要在生物识别认证被破坏或受损的偶然机会上提供选择性的认证策略。 在在本文中,我们将探讨「Flutter」 的「密码锁定屏幕」。...我们将看到如何在flutter应用程序中使用「passcode_screen」软件包来实现演示程序密码锁定屏幕。...它将显示flutter应用程序中使用密码屏幕如何解锁屏幕。 该演示视频演示了如何在Flutter创建密码锁定屏幕。...它显示了如何在flutter应用程序中使用「passcode_screen」软件包来运行密码锁定屏幕。它显示密码输入屏幕以解锁屏幕。它会显示在您的设备上。...,并在密码正确与否通知密码屏幕。

    5K30

    手机APP测试(测试点、测试流程、功能测试)

    ; 逆向:不输入用户密码或者是重复点击“确定/取消”按钮,是否允许登陆; 逆向:支持自动登录(记住密码)的应用在进行数校验,检查系统是否能自动登录成功并且数据操作无误 逆向:考虑无网络情况下能否正常进入免登陆状态...;   进行测试还要注意状态栏是否显示正确;工具栏的图标执行操作是否有效,是否与菜单懒图标显示一致;错误信息内容是否正确,无错别字,且明确等等; 2.控件 月份日期对应(比如2月有28天,7月31...,单击确定,正确执行操作;单击取消,退出窗口;   b,对非法的输入或操作给出足够的提示说明,,输入月工作天数为32,单击”确定“后系统应提示:天数不能大于31;   c,对可能造成数据无法恢复的操作必须给出确认信息...; 9.滚动条控件的测试   要注意一下几点:   a,滚动条的长度根据显示信息的长度或宽度及时变换,这样有利于用户了解显示信息的位置百分比,,word浏览100页文档,浏览到50页,滚动条位置应处于中间...;重启APP更新提示按照需求再次显示或者不再显示点击更新是否正确跳转至后台配置的更新页面 逆向:当有新版本,不删除客户端的情况下,直接更新是否成功 逆向:升级安装意外情况的测试(死机、断电、重启)

    7.8K43

    flutter 输入框组件TextField的实现代码

    TextField 顾名思义文本输入框,类似于iOS的UITextFieldAndroid的EditTextWeb的TextInput。主要是为用户提供输入文本提供方便。...在逻辑上,每当我们点击下面的按钮都会判断用户名密码是否符合要求,并且使用控制器清空已经输入的用户名密码。...当用户输入的手机号码不是11位的时候提示手机号码格式错误, 当用户没有输入密码,提示填写密码, 用户名密码符合要求提示登录成功。...当按下一个未完成操作(“next”或“previous”),用户的内容被提交给[controller],但不会放弃焦点,因为开发人员可能希望立即将焦点转移到[onsubmit]的另一个输入小部件。.... keyboardType TextField成为焦点显示的键盘类型。

    4.8K11

    Flutter》-- 4.Flutter组件基础

    FlutterWidget不仅可以表示UI元素,也可以布局元素、动画、装饰效果。 Widget不是最终显示在设备屏幕上的显示元素,而是一个描述显示元素的配置数据。...2)home:Widget类型,Flutter应用默认启动后显示的第一个Widget。 3)routes:Map类型,是应用的顶级路由表。...应用的顶部导航栏组件,可以用来控制路由、标题溢出下拉菜单。...; OutlineButton:默认是一个带有边框、不带阴影且背景透明的按钮,按下后边框颜色会变亮,同时会出现背景阴影效果; IconButton:一个可点击图标按钮,不支持文字,默认没有背景,点击后会出现背景...focusNode:用于控制TextField组件是否获取输入焦点,它是用户键盘交互的一种常见方式。 decoration:用于控制TextField组件的外观显示提示文本、背景颜色边框。

    12.4K30

    何在使用 Flutter切换应用时隐藏应用预览

    当您的应用显示敏感数据,这是一项重要功能。 如果您要显示敏感数据,例如。钱包金额,或者只是当登录表单显示插入的密码清晰(想想眼睛图标..),当您不在应用程序,您必须隐藏敏感数据。...许多应用程序已经这样做了,无论是在 Android 还是 iOS 上。 今天我们将看看如何在不使用任何包的情况下完成这项任务,并自己编写所有代码。别担心,这很容易。...因此,请继续了解当您从一个应用切换到另一个应用时如何隐藏应用预览。 开始使用 现在,让我们开始编码吧! 创建一个新的基本 Flutter 应用程序。(我想你知道该怎么做^^)。...现在将无法在整个应用程序截取屏幕截图。该功能广泛应用于金融科技领域。但最重要的是,启用本文的客观功能,即在我们切换应用时隐藏预览应用。...不仅将这种用户体验集成到 Android iOS ,而且还集成到 Flutter 框架提供的其他平台上,这将是一件好事。毕竟,即使在桌面操作系统上,也有带有应用预览其他一切的“应用切换器”。

    2.2K20

    Flutter 入门指北之输入处理(登录界面实战)

    ); }, child: Text('获取输入内容'))), // 展示输入的内容,点击按钮会显示...,也可以直接通过 Github 等三方登录,然后就可以搜索我们需要的图标了,接下来需要撸一个登录,那我们就找一个 用户 密码图标吧,选择喜欢的图标,然后鼠标放到图标会出现三个按钮,直接点击 购物车...那个按钮,然后就可以通过顶部的 购物车 按钮查看添加的图标点击下载代码,把资源文件下载到本地。...导入第三方插件 其实 Flutter 缺少很多功能,需要通过导入第三方插件来实现功能,插件就是 Flutter 原生交互的桥梁,也就是说,要写 Flutter 的插件,需要写 Android iOS...如果按照条件用户名为 kuky 密码为 123456 (条件可以根据自己进行修改)则会显示登录成功的逻辑 以上代码查看 login_home_page.dart 文件 注册界面的逻辑登录界面的逻辑几乎一样

    1.9K50

    Flutter版本玩Android客户端(6)——登录注册模块以及文章收藏与取消

    本篇继上篇Flutter版本玩Android客户端(5)——微信公众号tab点击跳转后,完成了登录注册模块,以及文章收藏与取消。...但仍有部分没有完成,比如登录状态的同步,drawer的header没有因登录状态而改变。 先看效果 ?...一些基本的检查可以交给validate函数,比如注册确认密码的校验,第二次输入的密码第一次相同。...、密码、登录成功状态,这部分是通过shared_preference三方库实现的,后面的Toast一样,后续会通过实现MethodChannel进行替换。...,然后在图标点击进行状态的切换,以收藏为例,代码如下: /// 收藏 collectArticle(ArticleItem articleItem) { ApiClient apiClient

    2.9K41

    fwr200路由器设置方法详解

    不同宽带线路的连接方法有所差异,请选择线路类型参考连接方法: 2、打开浏览器,清空地址栏并输入管理地址:“falogin.cn”,回车,初次登录界面需要设置路由器的管理密码,后续凭该密码才能进入管理路由器...设置密码后,点击“下一步”: 3、按照设置向导设置路由器,路由器会自动检测上网方式,确认上网方式后,请输入运营商提供的宽带帐号密码点击“下一步”: 注意事项: ①很多用户因为输入错误的宽带帐号或密码导致无法上网...,请仔细检查宽带帐号密码,注意中英文输入、字母大小写、后缀等是否输入完整。...4、分别设置2.4G5G的“无线名称”“无线密码”,无线名称 建议使用数字、字母组合,请勿使用中文或特殊字符,设置8位及以上的无线密码点击“下一步”: 5、点击确认”,完成设置向导。...6、设置完成后,进入路由器管理界面,在“常用设置” “上网设置”,如在上网设置图标显示打钩,即表示网络连接成功。 至此,路由器已经设置完成。

    1.7K30

    Flutter 专题】39 图解 Android 打包 APK 文件

    打包步骤: 检查 Android 环境,一般新建的应用若不做特殊调整基本没有问题;若需要网络请求,需要在 AndroidManifest 文件添加网络权限;若需要更改应用名称图标可以参考 Flutter...05: 图解修改应用名称及图标; ?...创建签名文件 key.jks,与直接 Android 打包 key 文件生成略有不同;需要在【终端】运行如下命令;并按照指示填写密码用户基本信息;注意:密码需要牢记,且 key 文件可以通用; keytool...【终端】进入需要打包应用 pubspec.lock 目录下,运行如下命令,等待即可,最终生成 APK 文件目录以【终端】显示为准; flutter build apk ? ?...和尚以前发布插件配置了一个墙外环境墙内环境两套,所以有些混乱,这个问题主要是 Flutter 环境未找到,需要找到个人配置的环境即可,若有问题可参考和尚很久以前分别为 Windows Mac 环境下配置环境的小博客

    87231

    在Windows配置PPPoE连接

    本文将为您提供详细步骤示例来指导如何在Windows操作系统上进行PPPoE连接的设置与配置。1....打开网络共享中心首先,点击任务栏右下角的网络图标,并选择“打开 网络 Internet 设置”。或者通过控制面板进入“网络 Internet”菜单,在其中找到“查看 网络状态及 任务”。2....创建新的拨号连接在 “显示已知位置信息”的页面点击左侧选项卡列表里 的"更改适配器设备名称"链接, 这会展示当前计算机所安装好了所有可使用以太网/无线局域网/Wi-Fi 设备。...配置PPPoE连接属性在弹出的对话框,填写以下信息:- 连接名称:自定义一个便于识别的名称;- 用户名密码:输入您提供的宽带账号及密码;示例:```用户名: example@isp.com密码: 12345678...完成并测试连接完成上述配置后,点击“连接”按钮来建立PPPoE拨号连 接。如果一切顺利,则会显示已成功建立 PPPo E 连接,并分配了IP 地址、默认网关等相关网络参数。

    59130

    开始使用-编写你的第一个Flutter应用程序 顶

    用户可以点击应用栏右上方的列表图标,以移动到仅列出收藏名称的新路由。 动画GIF显示完成的应用程序的工作方式。 ? 你会学到什么: Flutter应用程序的基本结构。...您将学习如何在主路由新路由之间导航。 在Flutter,导航器管理包含应用程序路由的堆栈。 将路由推入导航器的堆栈,将显示更新为该路由。 从导航器的堆栈中弹出路由,将显示返回到前一个路由。...1.向RandomWordsState的构建方法的AppBar添加列表图标。 当用户点击列表图标,包含收藏夹项目的新路线被推送到导航器,显示图标。...3.当用户点击应用的列表图标,建立一条路由并将其推送到导航器的堆栈。 此操作会更改屏幕以显示新路由。...最喜欢的一些选择,并点击应用的列表图标。 新路线显示包含收藏夹。 请注意,导航器会在应用添加一个“返回”按钮。 你不必显式实现Navigator.pop。 点击后退按钮返回到主页路由。 ?

    9.5K20

    Arch Linux (Manjaro) 配置与常用软件安装指南

    托盘图标显示 Win双系统下时间错误 KWallet相关 配置自动解锁 关闭KWallet Gnome Keyring 配置默认密钥环自动解锁 SSHD 配置ssh密钥密码临时保存 安装后桌面图标显示...HiDPI KDE (整数倍放大推荐)相较GNOME,KDE的缩放调整可谓感人,只需要在系统设置→显示监控→显示配置→缩放显示进行调整就行,整体调整过程简单Windows。...托盘图标显示 右击托盘图标空白处,选择“配置 系统托盘…”,在“项目”可以逐一更改托盘图标显示设置。...不推荐完全关闭KWallet,因为大多程序(:IntelliJ IDEA、Chrome、KMail)都会将密码保存在KWallet,若完全关闭KWallet可能会造成一些安全问题。...在文件~/.ssh/config增加一行: AddKeysToAgent yes 安装后桌面图标显示 如果遇到安装后桌面图标显示的问题,右击程序启动器(通常是左下角的Manjaro图标),选择“编辑应用程序

    8.9K20

    探索 Flutter 的 NavigationRail:使用详解

    介绍 在 Flutter ,NavigationRail 是一个垂直的导航栏组件,用于在应用程序中提供导航功能。它通常用于更大屏幕空间的设备,平板电脑桌面应用程序。...作用特点: 导航功能: NavigationRail 允许用户直观地导航应用程序的不同部分。通过点击导航栏的选项,用户可以快速地切换到不同的页面或执行其他导航操作。...当用户点击导航栏的选项,onDestinationSelected 回调函数会被调用,并根据选定的索引来更新 _selectedIndex。...以下是 NavigationRail 在健康监测应用的一些应用场景: 导航栏项: NavigationRail 的每个导航栏项可以代表一个健康数据模块,步数、心率、睡眠等。...用户可以通过点击导航栏项来切换到相应的健康数据页面。 自定义图标标签: 每个导航栏项可以使用自定义的图标标签,以便用户更容易识别理解各个健康数据模块。

    51910

    Linux Deploy:在Android上部署Linux

    ,比如需要让ssh返回结果为中文或者让图形界面的显示语言为中文,选择"zh_CN.UTF8"   INIT/MOUNTS项:若有需求可以设置,无需求可以忽略。   ...设置完成后,按返回键返回到应用主界面,按下菜单键,选择"安装"开始Linux系统的安装,安装过程需要一直保持网络连接(建议在WIFI下安装,大概需要几百兆流量)。   ...点击右上角的"√"图标保存并返回到"新建连接"界面,再次点击"√"图标保存,在"连接列表"中点击刚刚新建的这个项目连接到我们刚刚部署好的系统,连接成功后界面如下: ?   ...root用户的密码并且再次输入一次以确认(输入密码密码将不可见,连*都不会显示),设置完毕后,在终端键入命令su并输入刚刚设置好的root用户密码即可切换到root用户。   ...其中:   用户名为:root   密码为刚刚设置好的root用户的密码   主机名为:127.0.0.1   其他项保持默认,点击右上角的"保存"图标保存配置,在侧边栏的连接列表我们将以root用户连接到

    10.2K41

    Flutter 自定义动画底部导航栏

    在这个博客,我们将探索Flutter的自定义动画底部导航栏。我们将看到如何实现自定义动画底部导航栏的演示程序以及如何在您的 Flutter 应用程序中使用它。...介绍: 显示应用程序底部的Material小部件,用于在几个视角中进行选择,通常在 3 到 5 范围内的某个位置。底部导航栏包含各种选项,文本标签、图标或两者。...它提供了应用程序的高级视角之间的快速导航。对于更大的屏幕,侧面导航可能更合适。 这个演示视频展示了如何在 flutter 中使用自定义的底部导航栏。...它展示了自定义底部导航栏将如何在您的 Flutter 应用程序工作。它显示当用户点击底部导航栏图标,它们将被动画化并显示标签文本。当用户点击任何图标,颜色也会发生变化动画。...在 appBar ,我们将添加 title backgroundColor。我们将添加 body 并添加到**getBody()小部件。下面我们将深入定义代码。

    8.9K30

    滑动卡组件

    在在本博客,我们将探讨「Flutter」 的**滑动卡。**我们还将实现一个演示程序,并学习在flutter应用程序中使用「slide_card」包创建具有滑动动画效果的滑动卡。...用户可以轻松地将任何内容添加到卡以使用Flutter应用程序。 该演示视频展示了如何在Flutter创建滑动卡。...它显示了如何在flutter应用程序中使用「slide_card」软件包来使用滑动卡。它显示了一张纸牌的弹跳动画,该动画分成两个打开的不同纸牌。它会显示在您的设备上。...当用户点击图标,卡片被展开,再次点击然后折叠卡片。...在此卡片中,我们将添加标题,内容电话图标。当用户点击信息图标,将显示后卡,否则将不显示

    2.9K60

    Flutter 接入 Apple 账号登录教程

    引言 2019 年底,苹果发布了 iOS 13,并增加了一个新要求:任何使用第三方登录方法的应用 Facebook、Google、Twitter 等)在提交到 App Store 必须也支持 Sign...本文将详细介绍如何在 Flutter 实现这一功能,包括项目配置、iOS 部分的实现,以及 Flutter 代码的编写。...Sign in with Apple 是一种授权方式,用户点击带有 Apple 标志的按钮,输入 Apple 账号密码或使用生物识别方式(TouchID、FaceID)进行登录。...该按钮应该包含 Apple 标志 “Sign in with Apple” 标题,并且使用 Apple 提供的设计以避免应用被拒。...Flutter 显示 iOS 视图: io.flutter.embedded_views_preview 添加逻辑 现在,我们已经有了按钮,接下来处理授权流程。

    10010

    Flutter学习总结系列----第一章、Flutter基础全面详解

    在2018年初世界移动大会上发布了 Flutter的第一个Beta版本,2018年5月的 I/O大会上更新到了Beta3版本,向正式版又迈进了一步。一间业内对这个框架的关注度越来越高。...help 显示帮助信息的Flutter。 install 在附加设备上安装Flutter应用程序。 logs 显示用于运行Flutter应用程序的日志输出。...(四)首先模拟器,然后选择要运行的项目,注意了,这里有一个MainActivity main.dart,选择main.dart,然后点击绿色的三角号图标运行(或者点击菜单栏 Run)就可以了。...AS3.2编译菜单栏 如果代码有更改,可以点击黄色的闪电图标 ? 点击它之后就可以进行热加载。...store 密码> keyPassword= keyAlias=key storeFile=<keystore 文件的位置, 例如: /Users/<user name

    2K20
    领券