用户登录

在用户帐户页面上,如果用户没登录可以显示登录表单,如果登录了就显示用户帐户相关的信息。我们可以创建一个表示当前登录用户的 stream,然后在登录页面请求登录,成功以后可以往这个 stream 上添加登录成功的用户。这样用户帐户页面就可以利用成功登录以后的这个用户去做一些事情。

在 AuthService 这个服务里,可以添加一个 stream,先创建一个 StreamController,使用它要导入 dart:async。 设置一下类型,可以是 UserModel,这样这个 StreamController 控制的 stream 生产出来的数据的类型就应该是 UserModel 这种类型。

名字是 _currentUserController,新建一个 StreamController

下面再定义一个 getter 方法,类型是 Stream,这个 Stream 上的数据的类型是 UserModel, get currentUser,方法返回的是 _currentUserController 这个 Stream 控制器上的 stream 。

不需要的 StreamController 可以关掉,在类里添加一个方法,方法的名字是 dispose ,在这个方法里,用一下 _currentUserController 上的 close ,关掉不需要的 StreamController 。

添加数据

然后找到下面定义的 login 方法,登录成功以后,这里可以添加一个 user ,然后 return 一下这个 user。 上面再用一下 _currentUserController 这个 Stream 控制器上的 sink , 通过 sink 可以往 stream 上添加数据,用一下 add 方法,添加的数据是 user,就是登录成功以后返回来的用户。

StreamProvider

下面我们需要再去配置一个 Provider,在应用里提供这个 currentUser stream ,打开 app.dart,在这里用的 MultiProvider 里面再添加一个 Provider,这里可以用一下 StreamProvider,提供一个 Stream,类型是 UserModel,里面添加一个 builder ,用一个方法返回要提供给小部件的 stream 。

要提供的 stream 在 AuthService 里面,在上面先定义一个 authService ,新建一个 AuthService,然后让这个 builder 返回的 stream 是 authService 里的 currentUser。

上面定义的 AuthService,可以换成 authService 。

使用 StreamProvider

再找个地方用一下这里提供的这个 StreamProvider ,打开 profile.dart ,在这个小部件里,添加一个属性,类型是 UserModel,名字可以叫做 _currentUser 。

然后在小部件的 build 方法里面,设置一下 _currentUser 的值,它的值应该是 Provider.of 返回的值,设置一下类型,类型是 UserModel 。

下面可以这样试一下,判断一下,检查 _currentUser 是不是不等于 null,如果是的话,就在控制台上输出一个 还没有登录。

添加一个 else,如果 _currentUser 的值不是 null,说明用户已经登录了,可以输出一个 当前登录用户,后面加上 _currentUser 里的 name 的值。

测试

打开编辑器的调试,刷新一下应用的状态。 你会发现控制台上会输出 还没有登录。

然后打开用户帐户页面,输入要登录的用户名,还有跟这个用户对应的密码,按一下 登录。成功以后,控制台上会输出 当前登录用户,后面是登录的用户的用户名。

应用构建用户帐户页面的时候,_currentUser 还没有值,输入用户名,密码,按了登录按钮,会执行 AuthService 服务里的 login 方法,如果登录成功,就会在 currentUser 这个 stream 上添加一个用户数据,这样在用户帐户页面上的 _currentUser 就有值了,重建小部件,就会在控制上输出这个 当前登录用户,还有登录的用户的名字。

用 StreamProvider 提供当前登录用户《 Flutter 应用案例: 用户登录 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点