由于项目中的头像图片加载极慢，需要对此进行优化。主要针对以下两点做优化：
- 由于后端没有对图片进行压缩，前端对上传的图片提前进行裁剪压缩上传。
- 对未改变的图片进行本地持久化，减少二次加载图片的延迟。
图片的裁剪压缩直接采用了第三方插件，这里不再过多赘述，主要了解一下flutter的图片加载及缓存模式。
在flutter中ImageProvider作为一个抽象类，他除了定义了图片数据获取和加载的相关接口，还提供了图片数据源及缓存图片的作用。渲染一张图片：
- 先判断图片数据有没有缓存，如果有，则直接返回ImageStream。
- 如果没有缓存，则调用load(T key)方法从数据源加载图片数据，加载成功后先缓存，然后返回ImageStream。
查看图片是否缓存及生成缓存数据都与缓存key相关，现在我们看一下缓存的key，因为Map中相同key的值会被覆盖，也就是说key是图片缓存的一个唯一标识，只要是不同key，那么图片数据就会分别缓存。图片缓存key是ImageProvider.obtainKey()方法的返回值，而此方法需要ImageProvider子类去重写。接下来看一下NetworkImage为的obtainKey()的具体实现：
@override
Future obtainKey(image_provider.ImageConfiguration configuration) {
return SynchronousFuture(this);
}
代码创建了一个同步的future，然后直接将自身做为key返回。因为Map中在判断key（此时是NetworkImage对象）是否相等时会使用“==”运算符，那么定义key的逻辑就是NetworkImage的“==”运算符：
@override
bool operator ==(dynamic other) {
... //省略无关代码
final NetworkImage typedOther = other;
return url == typedOther.url
&& scale == typedOther.scale;
}
所以对于网络图片来说，会将其“url+缩放比例”作为缓存的key。也就是说如果两张图片的url或scale只要有一个不同，便会重新下载并分别缓存。
另外，图片缓存是在内存中，并没有进行本地文件持久化存储，所以网络图片在应用重启后需要重新联网下载的原因。虽然Flutter中的ImageProvider本身是带有内存缓存机制的，但由于项目图片存储于云端，且每次图片地址url都会有所变化，导致NetworkImage自带的缓存机制也无效。
基于以上原因，最终决定将图片以二进制形式请求到本地，并以图片主路径（除其它附带参数）作为存储key保存，若key不变，则采用Image.memory()读取图片数据流并渲染到页面中。以下是部分关键代码：
// Global.dart
import 'package:shared_preferences/shared_preferences.dart';
class Global {
static SharedPreferences _prefs;
static Profile profile = Profile();
// 持久化Profile信息
static saveProfile() =>
_prefs.setString("profile", jsonEncode(profile.toJson()));
}
// userModel.dart
class UserModel extends ChangeNotifier {
Profile get _profile => Global.profile; // 本地持久化
String get _headImageKey => _profile.headImageKey;
Uint8List get _headImageData {
if (_profile.HeadImageData != null) {
return new Uint8List.fromList(_profile.HeadImageData.codeUnits);
} else {
return null;
}
}
get headImageKey => _headImageKey;
get headImageData => _headImageData;
set _headImageKey(String key) {
Global.profile.headImageKey = key;
Global.saveProfile();
}
set _headImageData(Uint8List bytes) {
Global.profile.HeadImageData = new String.fromCharCodes(bytes);
Global.saveProfile();
}
Future _initHeadImage(String url) async {
String newImageKey = getImageKey(url);
if (_headImageKey != newImageKey) { // 判断key是否相同
_headImageKey = newImageKey;
Response res = await dio.get(url); // 二进制形式请求图片
Uint8List bytes = res.data;
_headImageData = bytes;
notifyListeners();
} else {
print('利用缓存头像！！！！！');
}
}
}
调用Image.memory( Provider.of