当前位置: 首页 > 开发杂谈 >

Flutter基础介绍与实作-Day16 Onboarding、Login、Sign Up范例实作(3)

大家昨天消化的怎麽样啊!我们今天就从昨天说的忘记密码页开始吧!


忘记密码页
我们一样先来构思一下忘记密码页要有些什麽吧!一样由上而下会有 AppBar,标题,描述文字,email 输入框,送出的按钮,注册连结…等等
其实这里跟登入页差不多,大家都可以自己先试试看喔!
对了我刚刚发现注册连结在我们作登入页的时候,没有特别处理它的widget,所以我们这边一起补上喔!
首先我们先来资料夹绕口令,先在lib资料夹下的components资料夹中建立no_account_text.dart,再来一样在lib资料夹下的screens资料夹里再建一个forgot_password的资料夹,用来放忘记密码页里的程序,然後建一个forgot_password_screen.dart,最後一样在forgot_password资料夹里建一个components资料夹,里面再建一个forgot_password_form.dart,用来处理email输入框,这个比较复杂,因为它要帮我们检查使用者在按送出的时候,输入的内容是否正确,如果有错误或是遗漏会及时提醒使用者,这样我们忘记密码页所需的资料夹就都建完了喔,让我们来看程序码吧!
no_account_text.dart
https://ithelp.ithome.com.tw/upload/images/20210930/20141032ZLVEhK5Ny1.jpg

forgot_password_form.dart
https://ithelp.ithome.com.tw/upload/images/20210930/201410328puljkgRSB.jpg

刚刚上面少建一个东东,在刚刚建的forgot_password资料夹下的components资料夹里建一个body.dart,然後就可以依序把我们的构想设计上去
body.dart
https://ithelp.ithome.com.tw/upload/images/20210930/20141032ux9RHCvVCQ.jpg

然後再把忘记密码页加到forgot_password_screen.dart里
forgot_password_screen.dart
https://ithelp.ithome.com.tw/upload/images/20210930/20141032yx4mdKcoU4.jpg

最後要在routes.dart补上连结,不要忘记登入页里也要补上忘记密码的事件喔,这边之前都有说过就交给你们试试看吧!
成果如下
https://ithelp.ithome.com.tw/upload/images/20210930/20141032f6u2G8nhRf.jpg

完整程序码


今日结语
今天只有写完忘记密码页,真的不是我想偷懒,想留一点时间给大家消化,还有把要补的连结补完,明天把注册页讲完我们的App登入页就可以正式结束了喔!


相关文章:

  • D5-用 Swift 和公开资讯,打造投资理财的 Apps { 实作 上市/上柜/兴柜 所有资料的列表 }
  • 收到德国站地址审核邮件的两种情况
  • 【从零开始的 C 语言笔记】第二十八篇-Struct的介绍与应用
  • 亚马逊卖家如何做到快速出单?
  • Day 2 - Array 阵列组合技 (1)
  • #24 数据中中的特徵相关性(3)
  • 亚马逊卖家如何追踪竞争对手的站外推广活动?
  • 跨境电商的外部风险和内部风险
  • 亚马逊美国站常用的认证有哪些?
  • 【Day01】React 简介
  • 用资料结构看 evernote - 修改前 - DAY 10
  • TikTok的直播机制和其它跨境平台有何不同?
  • D7: [漫画]工程师太师了-第4话
  • D-14.Rspec 从零开始写测试(四) 私有方法测不测? && Maximum Product of Three Numbers
  • [Python 爬虫这样学,一定是大拇指拉!] DAY28 - 实战演练:集大成 - 自动更新每日个股日成交资讯
  • 以太坊是什么?以太坊原理和以太坊入门教程
  • 海外营销周报:谷歌在搜索中取消Q&A功能,FaceBook Marketplace用户总量达 10 亿人 – 知外贸
  • VPS评测:Clouvider Limited英国VPS性能测试
  • 网站更换域名后副作用大吗?针对谷歌如何更换域名
  • 狗狗币怎么获得?狗狗币挖矿教程和狗狗币使用方法
  • 礼品卡和虚拟信用卡的区别:Prepaid Debit Card和Virtual Credit Card区别
  • 阿里云OSS对象存储控制客户端
  • MySQL mysqldump怎么用?MySQL怎么用mysqldump导入导出数据
  • Git是什么?
  • WordPress禁用古腾堡编辑器全屏模式
  • 搬瓦工VPS开通使用教程大全:教你如何购买、切换机房、更换IP、续费、升级套餐、退款
  • WordPress建立数据库连接时出错怎么办?
  • 日本虚拟信用卡预付卡礼品卡大全
  • 海外营销周报:Facebook将对其广告工具进行调整,Linkedin恢复中国境内账号注册
  • 瑞士银行开户指南:0门槛开户欧洲银行卡教程【Dukascopy开户教程】