Flutter个人开发项目架构-2

前言

上一篇文章已经搭建出基础框架，之后我也利用空闲时间继续优化。此篇文章的主要方向还是围绕provider搭建mvvm架构，加入全局样式管理、路由守卫、websocket、页面demo，以及一些实战中的小技巧。同时我也将项目上传至GitHub：https://github.com/WxqKb/Basic-framework.git，欢迎小伙伴一起讨论。

样式管理：

这里提前说一下，真正项目实施，需要注意ThemeData的配置，这个相当于全局样式的挂载，后续在子页面中可通过Theme.of(context).XXX去调用。

挂载Theme

任何一套UI设计都有其规则，将通用的样式，如文本颜色、大小等；将其归类特别有必要，可以省去很多重复代码，后续如果考虑换肤功能，那么整套UI的维护将会节省很多时间和精力。这里没有什么技术可言，但是作为前端我认为需要养成这个习惯。

样式管理

WebSocket通信：

webSocket现在在业务开发的应用已经是很广泛了。Flutter通过web_socket_channel package可以很方便的实现webSocket通信。

具体使用方法我就不再多说，官方文档都有，用起来也不难。这里主要分享封装的思想，首先是websocket_util，这里主要实现websocket的连接和订阅消息处理回调；此处完全作为一个工具类，不主动做websocket的操作。

websocket-1

websocket-2

之后在communication_util中进行websocket工具类的调用，并启动定时器和ping pong轮询，已防止websocket连接丢失；当然也会对返回信息进行处理。轮询需要后端做配合，每隔5秒发送一次ping给websocket服务器，接收到服务器返回的pong为正常通信；当连续3次没有接受到pong需要重连websocket。

实战小技巧：

在18年尾刚接触Flutter时，经常被其红色的出错页面吓到，这种错误相信大家都有见到。但到了线上版本，这种页面肯定是不能出现的。因此，我们需要通过自定义错误页面将红色错误控件在线上版本去除，并且将错误收集上传。这里使用的是Zone来制定程序运行的环境，可以收集错误并上传日志。

沙盒

写在后面

这个项目其实主要还是我个人的学习项目，后续我会继续在这里学习编写更多实用的功能，比如下拉刷新，上拉加载，音视频demo，高德地图等；这是GitHub链接，仅供学习：https://github.com/WxqKb/Basic-framework.git

希望大家多多指导我！

再会