Flutter项目快速搭建指南

本文字数：8683字

预计阅读时间：30 分钟

前言：

笔者在这之前已经有一年时间没有接触过flutter项目的开发了，目前由于新项目的需要，要重新开始搭建一个flutter项目。让我感到惊讶的是，flutter经历了多年的发展，生态真的越来越完善了，很多之前开发中遇到痛点问题都得到了很好的解决，开发体验倍增。下面我就分享一下这次flutter新项目搭建的经验，主要包括网络请求、数据持久化存储、路由、多机型屏幕适配、闪屏页配置、状态管理、widget生命周期、Key的使用等方面的内容。

一、网络请求处理

互联网时代，网络请求几乎是每个app开发都必不可少的部分，开发时需要注意的地方大概有实体类封装、请求调用封装、拦截器处理等。

1. 实体类封装

实体类就是我们经常说的bean，大多数的开发场景中，bean都是由json字符串解析而来的，我们所要做的封装过程，其实也就是对json字符串的序列化及反序列化。

但是在这之前，我想先介绍另外一种（除了json协议之外）零封装的实体数据序列化协议。What？零封装？所谓零封装，就是连bean的实体类都不用自己去创建了，解析过程也不需要自己去关心，这个协议就是protobuf。

protobuf是一种二进制的数据传输协议

相比于json字符串，它是天然加密的，而且体积更小，网络传输速度更快。

更为难得的是，protobuf协议的实体数据可以使用脚本自动生成各个语言的实体类代码，这样就可以保证客户端与服务端的实体类完全一致，比如字段类型、字段名等和服务端的实体数据都是完全一致的。由此可以解决json协议带来的种种痛点，比如它提供int64和int32,不用再纠结这个字段是int还是long了，甚至有些变态的服务端接口会返回BigDecimal这样的数据类型，让客户端开发人员气得跺脚。

由于所有代码都是自动生成的，只要服务端对实体类做了改动，客户端就可以重新生成一份新的代码，不管是字段名还是字段类型做了修改，客户端开发人员都不需要再和后端去一一对接了，只需要重新生成代码，修改编译产生的错误即可，大大降低了两端对接的成本。

如果是之前一直使用json，没有使用过protobuf，一定会爱上它的，对客户端开发者实在是太友好了。但考虑到后端万年不变的开发习惯，protobuf还是比较难以推广，毕竟说服后端人员换新的技术是个非常大的挑战，如果是小公司小团队小项目，真的推荐使用protobuf，有兴趣的朋友可以去做更多的了解。既然还是无法避免使用json，下面就说一说flutter项目对json解析的封装。

json解析：

• json生成dart实体类

有网页版在线生成，IDE插件也有相关工具，这里就不详细介绍了。

• 序列化

一般生成实体类代码的工具也会附带生成对应的序列化，反序列化的函数，即fromJson和toJson，但这种方式是很脆弱的，如果修改了某个变量的名称或者是类型，那么也要修改对应的序列化函数，大量的代码很容易出错。

所以这里推荐使用一个自动生成序列化函数的插件：

如上，只需要使用JsonSerilizable注解，然后运行flutter pub run build_runner build就会帮你自动生成序列化函数了。

• 范型处理：

通常我们希望对get请求做类似如下的封装，通过指定范型，直接返回我们想要的那个实体类:

但flutter是禁用dart的反射的，范型是没有运行时的，也就是说通过范型没办法直接生成对象，即T.fromJson(json)是没法实现的。

所以我们要换个思路去实现，即借助dart语言的函数引用：

这样就绕过了范型不能运行时的问题。

2. Dio框架的使用

dio是flutter开发最热门的网络请求框架，所以不需要犹豫使用它就对了。使用dio时需要注意的是，它不像android中的okhttp框架那样功能一体化，dio自身没有集成任何的拦截器，所有拦截器都需要开发者自己去配置，好处是比较灵活，坏处呢，就是又要麻烦开发者了。

需要添加如下的依赖去使用常用的拦截器及适配器： 

具体配置：

一定要注意拦截器的顺序，第一个为缓存，如果缓存命中就不需要走下面的逻辑了，网络拦截器注意放在最后。

3. 缓存处理

客户端通常会做一套get请求的缓存封装，对一些不经常更新的或者没网情况下也需要展示的数据进行缓存。通常的做法是写一套文件缓存的逻辑，自己维护缓存健值对，但是如果能利用到dio的缓存拦截器，会不会就省了很多事呢？dio的缓存拦截器本来是基于http协议给服务端用作缓存配置的，但是服务端开发人员往往没那么关心缓存的配置，所以客户端可以自己来处理缓存，节省沟通的成本。

先看下缓存拦截器有一个缓存策略的枚举类:

其中request是默认的，基于http协议去作缓存，我们可以使用refreshForceCache去强制刷新缓存，同时需要网络请求的时候使用noCahce绕开缓存。

在封装缓存前先对请求结果做一个包装，用于识别请求结果是来自于缓存还是网络：

然后对get请求做一个封装：