如何在Flutter中使用动态首页?

今天,我将举例说明如何在Flutter应用中动态设置您的首页。 您知道,Flutter有一个MaterialApp小部件类来启动您的应用程序。 该类具有一个名为“ home”的属性,您可以在创建新类时使用此属性。 但是,如果您由于某种原因要在启动应用程序时更换房屋,该怎么办?

在基本版本中,可以通过使用启动条件来执行此操作,但是如果要检查给定用户的身份验证,并且想要确定该用户应该位于哪个页面上,则需要使用异步。 为什么? 因为,对于身份验证系统使用哪种方法,它应该具有用于​​初次检查的异步功能。

在这篇文章中,我将提供一个身份验证示例。


首先,如果您是Flutter的新手,则可以查看我的旧帖子,以开始和创建新的Flutter项目。 在本文中,我不会展示创建一个新的Flutter项目。 考虑一个具有身份验证的基本应用程序。 那么,该应用程序应包含哪些页面? 答案是登录页面和主页。 如果该用户已登录,则需要向该用户显示主页。 否则,您需要显示登录页面。 因此,请在此列表中查找应用程序中的类。

  • 主页
  • 登录页面
  • 验证服务

我们有3个班级。 2个类用于页面,另一个类用于服务auth服务。 在这篇文章中,我将伪造异步功能。 因为,在这篇文章中,我想着眼于改变家庭财产来运行您的应用程序。 考虑一个基本的身份验证功能,这些是什么? 登录和注销(如果使用Firebase,则注册可以是可选的)。 因此,auth类具有两个功能,并且这些功能应该是异步的,因为如果要登录或注销,则应该发送请求,或者需要等待类似的事情。 让我们看一下该场景的活动图。

本教程非常简单和基本。 是时候开始了!


让我们从auth服务类开始编写。 我说过我们在此类中有两种方法,分别是登录和注销,我将对登录方法使用随机化响应,因为您知道,该函数在现实世界中应为true或false。 我将对注销方法使用无效响应。

services / auth.service.dart

接下来,创建我的页面。 我说过,在这个例子中我有两页。 在登录页面中,用户可以登录到应用程序,但是我想使用随机结果登录,因为您知道每个用户都无法在第一时间登录应用程序。 我为此使用了authService中的dart:math库,我想在登录页面中显示响应类型。 在主页上,用户可以注销并返回登录页面。

pages / login.page.dart
pages / home.page.dart

是的,我们有适用于应用程序的页面和服务类别。 因此,该运行应用程序的时间了。 因此,主要目标将在main.dart文件中,因为我们需要在此等待auth登录方法,然后才需要通过改变登录方法结果来确定应用主窗口小部件。 我将在此文件中使用async和await关键字。 此关键字是dart语言的功能。

棉镖

就这样。

GitHub:https://github.com/anilcancakir/dynamic-home-example-flutter