flutter 登录和退出登录_Flutter学习笔记（二）登陆注册界面的实现

最新推荐文章于 2024-05-12 20:32:11 发布
最新推荐文章于 2024-05-12 20:32:11 发布
阅读量1k 收藏 3
点赞数
文章标签： flutter 登录和退出登录
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39640262/article/details/113384904
版权

Flutter学习笔记(二)登陆注册界面的实现

简单的登录和注册界面的布局

SharedPreferences存储数据

页面路由和参数传递的心得

这几天按照顺序先完成了登录和注册的页面，没有什么特别的东西，就是异步这个东西之前只有在用JS做前端的时候遇到了一次问题，还是同学帮忙解决的，这一次又遇到了所以多花了一点时间debug。

简单的登录和注册界面的布局

由于是刚刚开始学习flutter，于是就偷懒参考了现成的布局设计和代码，自己修改了一番。

效果如图所示，参考自用flutter写一个精美的登录页面，暂时没有做页面适配，以后学习到了会补上。

3d912071626a5e941f1365724c5c84ec.png

7efee8da4cfd97199ab52bcbccc001aa.png

布局的代码参考上面引用的教程，这里主要说一下由于登录和注册都是在按钮onPressed之后才触发判断TextFormField中的值，所以使用了全局的GlobalKey来验证输入是否符合要求，但是这样有一个问题，那就是在判断输入符合要求之后在保存，那么在判断确认密码的时候还没有获取到第一次输入密码的值，于是就使用了TextEditingController来获取输入的值。在onPress

最低0.47元/天 解锁文章
weixin_39640262
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Flutter系列（十）实现个人中心页
摸金校尉的博客
06-23 1521
本文用flutter实现个人中心页布局
Flutter-登录界面实战
mrRuby的博客
01-07 5799
一、前言 前面了解了Flutter的适配原理级及适配方案，接下来我们进行一个实战，开发一个登录界面，效果图如下： 二、代码实践 2.1 LoginPage 这里LoginPage使用StatefulWidget来实现： class LoginPage extends StatefulWidget { const LoginPage({Key? key}) : super(key: key); @override _LoginPageState createState() => _Log
编程新务实验四 / 使用SpringBoot + Flutter实现一个具有登录，注册，邮箱验证，增删改查页面，社区功能，个人中心功能的APP
One of thre_tigers的博客
01-26 1万+
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-moUvx1ak-1611588997318)(https://i.loli.net/2021/01/13/HxzQdcyPgYteXTv.png)] 实验4代码说明文档 ​ ——created by 屈德林 in 2021/1/13 这是编程务实实验lab4，我使用SpringBoot + Flutter技术实现了一个具有登录，注册，邮箱验证，增删改查页面，社区功能，个人中
用 Flutter 写一个精美的登录页面（最新版）
热门推荐
萌宅鹿的技术小屋
04-22 1万+
使用 Flutter 开发一个简单精美的登录界面
Flutter 玩转微信——闪屏页妙用
最新发布
2401_84149607的博客
05-12 626
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此我收集整理了一份《2024年Android移动开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
Flutter登录，注册示例Demo
StreakerHan
12-09 949
Flutter登录，注册示例Demo
flutter基于provider状态管理设置主题颜色、实现简单登录、注册功能---页面+逻辑
可可的博客
03-04 3715
flutter登录功能的实现 第一步：创建目录文件夹 第二步： 配置yaml文件依赖 provider: ^4.3.2+3 dio: ^4.0.0 tdui: 0.0.3 encrypt: ^5.0.1 # 提示框 flutter_easyloading: ^3.0.0 编写global.dart import 'package:dio/dio.dart'; import 'package:flutter_easyloading/flutter_easyloading.dart'
flutter web登录和注册页
04-12
一个flutter web项目的demo的第一步，简单实现登录和注册页，以及两个页面的互相跳转
weibo_kit:flutter版新浪微博登录分享
05-15
flutter版新浪微博SDK fake 系列 libraries dart/flutter 私服 docs iOS Github android buildscript { dependencies { // 3.5.4/3.6.4/4.x.x classpath 'com.android.tools.build:gradle:3.5.4' } } # 不需要做...
flutter 登录页以及登录后页面切换（路由）
08-06
使用flutter 实现基础的登录页手机号码获取验证码，60s倒计时，通过路由页面切换，页面结构 1.标题 2.手机号输入框 3.验证码输入框 4.获取验证码 5.60s倒计时 6.登录按钮 7.跳转到主页
Flutter-login-signup:登录并注册应用样板，用于将来的项目
03-28
Flutter登录注册 登录并注册应用样板，用于将来的项目
flutter-signin-register-ui：:key:在flutter中创建的“登录并注册页面” ui设计
02-24
flutter_login_register_ui 一个新的Flutter项目。 入门 该项目是Flutter应用程序的起点。 如果这是您的第一个Flutter项目，那么有一些资源可以帮助您入门： 要获得Flutter入门方面的帮助，请查看我们的，其中提供了教程，示例，有关移动开发的指南以及完整的API参考。
Flutter 实现了登录界面
08-14
Flutter 实现了登录界面
Login_UI_Flutter：使用flutter的漂亮的登录页面UI
02-18
由Google徽标制作的Dart Flutter是Google的UI工具包，可通过一个代码库为移动设备，Web和桌面构建漂亮的，本机编译的应用程序。 ＃＃ 入门该项目是Flutter应用程序的起点。 如果这是您的第一个Flutter项目，那么有...
Flutter实现一个简单的登录界面
一个来自吉尔尼斯的博客
02-16 765
new Image.asset()这个是从本地加载图片的写法，这里要注意的是除了要在根目录下创建一个images文件夹把timg.jpg放到里面之外，还要在pubspec.yaml的flutter下面加入 assets:- images/timg.jpg，要不然图片也是识别不出来的。其他的属性我都在代码里面注释里面写的很清楚了，也没有啥需要特别注意的，就是熟悉控件的用法就好了。这篇文章主要是实现了一个简单的登录界面，效果可以看gif，主要是了解一些常用控件以及布局的样式，还有界面跳转，数据传递。
Flutter--密码登录注册界面
weixin_44587801的博客
07-25 1655
flutter 密码登录注册界面
Flutter学习笔记（二）登陆注册界面的实现
qq_41912380的博客
07-20 5713
Flutter学习笔记（二）登陆注册界面的实现简单的登录和注册界面的布局SharedPreferences存储数据 这几天按照顺序先完成了登录和注册的页面，没有什么特别的东西，就是异步这个东西之前只有在用JS做前端的时候遇到了一次问题，还是同学帮忙解决的，这一次又遇到了所以多花了一点时间debug。 简单的登录和注册界面的布局 由于是刚刚开始学习flutter，于是就偷懒参考了现成的布局设计和...
【Android笔记】Android studio开发flutter项目进阶之实现用户登录功能
a6669666的博客
01-11 1090
Windows系统下用Android studio开发flutter项目实现用户登录功能详解。
java 验证码发送60s_Flutter学习笔记（40）--Timer实现短信验证码获取60s倒计时
05-20
在Flutter中，可以使用Dart的Timer类来实现短信验证码获取60s倒计时。具体实现步骤如下： 1. 在State类中定义一个变量，用于记录倒计时的秒数，如下所示： ``` int _countdownSeconds = 60; ``` 2. 在点击发送验证码按钮的回调函数中，启动Timer定时器，每秒钟减少一秒，并更新界面上显示的倒计时秒数，如下所示： ``` void _sendVerificationCode() { // 启动定时器 Timer.periodic(Duration(seconds: 1), (timer) { setState(() { _countdownSeconds--; }); if (_countdownSeconds == 0) { // 倒计时结束，取消定时器 timer.cancel(); } }); } ``` 3. 在界面上显示倒计时秒数的地方，使用Text组件显示_countdownSeconds变量的值，如下所示： ``` Text('$_countdownSeconds s') ``` 这样，当用户点击发送验证码按钮时，界面上就会显示一个60s的倒计时，60秒后自动结束。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值