Flutter学习笔记（二）登陆注册界面的实现

最新推荐文章于 2024-08-18 10:44:42 发布

我在拉我

最新推荐文章于 2024-08-18 10:44:42 发布

阅读量5.9k

点赞数 6

分类专栏： flutter学习笔记文章标签： flutter 登陆注册

本文链接：https://blog.csdn.net/qq_41912380/article/details/96601065

版权

本文介绍了使用Flutter创建登录和注册界面的过程，包括界面布局、SharedPreferences数据存储以及页面路由和参数传递。在布局中，作者参考了现有设计并用GlobalKey处理输入验证。通过SharedPreferences实现本地临时存储用户数据。此外，文章讨论了页面路由的注意事项，强调了正确处理参数传递的重要性。

摘要由CSDN通过智能技术生成

Flutter学习笔记（二）登陆注册界面的实现

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

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

由于是刚刚开始学习flutter，于是就偷懒参考了现成的布局设计和代码，自己修改了一番。
效果如图所示，参考自用flutter写一个精美的登录页面，暂时没有做页面适配，以后学习到了会补上。
登录界面
注册界面
布局的代码参考上面引用的教程，这里主要说一下由于登录和注册都是在按钮onPressed之后才触发判断TextFormField中的值，所以使用了全局的GlobalKey来验证输入是否符合要求，但是这样有一个问题，那就是在判断输入符合要求之后在保存，那么在判断确认密码的时候还没有获取到第一次输入密码的值，于是就使用了TextEditingController来获取输入的值。在onPressed之后，调用_userRegister()方法获取值并进行判断。

代码如下：

  
  TextEditingController _controllerMail = new TextEditingController();
  TextEditingController _controllerPwd = new TextEditingController();
  TextEditingController _controllerRePwd = new TextEditingController();
  
  void _userRegister() {
   
      _email=_controllerMail.text;
      _password=_controllerPwd.text;
      _password_confirm=_controllerRePwd.text;

      if (_formKey.currentState.validate()) {
   
        save();