Flutter实战一Flutter聊天应用(二十一)

在这一系列的前二十篇文章里,我们已经完成了最主要的添加、删除好友,并与好友聊天,还可以发送图片的功能。这一篇文章会完成个人资料与设置相关的功能,并将应用发布上线。

之前设置了个人资料的入口按钮,现在我们就来完成个人资料屏幕,个人资料屏幕的UI如下图所示。在该屏幕点击右上方的按钮会变换浏览、编辑两种状态,而控制状态变换的关键在于设置一个全局变量。

Flutter实战一Flutter聊天应用(二十一)

当用户进入个人资料屏幕时,编辑状态设置为false,因此显示成浏览状态。用户点击“编辑”按钮,编辑状态设置为true,此时所有控件会重新构建成可编辑状态。用户点击“保存”按钮,应用程序会提交用户修改的信息,并回到浏览状态。

个人资料屏幕的代码在personal_data.dart文件中,具体代码可以点击查看,不过建议先尝试自己写一下。除了个人资料屏幕,还有设置屏幕,其实就是一个列表,里面有两个选项,“修改密码”与“退出登陆”。

Flutter实战一Flutter聊天应用(二十一)

在设置屏幕,点击“退出登陆”按钮,应用程序会清除登陆信息并返回登陆页面。点击“修改密码”按钮则会跳转到修改密码屏幕,在修改完密码会提示修改成功,而不会自动返回设置屏幕。设置屏幕的代码在app_settings.dart文件中,修改密码屏幕的代码在modify_password.dart文件中。这两个屏幕的代码简单,也是建议自己写一次试试。

到现在,我们的聊天应用程序已经开发完成,可以打包发布到Android与iOS平台,比如下图所示,应该已经发布到Google Play并可以下载。由于iOS开发者账号成本太高,该应用程序并没有上架到iOS平台。

Flutter实战一Flutter聊天应用(二十一)

因为刚开始是想按一个Flutter实战案例来编写,所以需要省略服务器的部分,这样就可以专注于APP设计,所以直接用谷歌提供的后端服务,导致
应用程序必须在*时才能正常访问,不过这个项目也足以证明Flutter框架目前可以用于实际应用开发。

纸聊这个APP的源代码共享在GitHub上,可以给大家作为参考。另外也在这里打个广告,如果你也想使用Flutter开发一个开源项目,欢迎加入Flutter开荒团,让我们一起开发Flutter开发的荒漠!(将你的GitHub账户名发到评论区或私信我,我会发送邀请邮件给你)

Flutter实战一Flutter聊天应用(二十一)