用户登录

在用户帐户这里,添加一个退出登录用的按钮,先添加一个 SizedBox,里面用 height 设置一下高度,大小是 8,下面再用一个 RaisedButton 小部件,小部件的 child 是个 Text 小部件,文字是 退出登录。

再用 style 设置一下文字的样式, TextStyle,里面先用 color 设置一下文字的颜色,Colors.white70。然后在这个 RaisedButton 里面,再用 color 设置一下按钮的背景颜色,Theme.of context, primaryColor。

下面再设置一下 splashColor,颜色是 Colors.white12 ,再把按钮的 elevation 设置成 0.0。

按钮需要一个 onPressed ,点击回调,暂时先用一个空白的方法。现在界面上会显示一个 退出登录 用的这个按钮。

UserModel

打开应用里的 UserModel,给它添加一个构造方法, UserModel ,一个对象,里面添加一个 this.name 。

AuthService

然后打开 AuthService ,在这个服务里再添加一个退出登录用的方法,方法的名字叫 logout,方法里面可以先把 isLoggedIn 的值设置成 false 。

下面可以再用 _currentUserController.sink.add 往 stream 上添加一个数据,数据是个 UserModel ,里面用 name 设置一下用户名,可以设置成 guest,这个名字可以表示还没有登录的用户。

回到 Profile ,找到 退出登录 按钮,点了这个按钮,执行一下 _authService 上的 logout 。

测试

按一下应用的帐户页面上的 退出登录 按钮,执行了 AuthService 上的 logout, 这个方法会把 isLoggedIn 设置成 false,又因为在这个方法里往 currentUser 这个 Stream 里面添加了一个数据,所以小部件会被重建。 这样就会显示登录页面。

再试一下,输入一个用户名,然后再输入用户对应的密码,按一下 登录, 显示当前登录的用户, 再按一下 退出登录 ,又会显示登录页面。

用户退出登录《 Flutter 应用案例: 用户登录 》

统计

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

社会化网络

关于

微信订阅号

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