flutter图片本地持久化

由于项目中的头像图片加载极慢，需要对此进行优化。主要针对以下两点做优化：

由于后端没有对图片进行压缩，前端对上传的图片提前进行裁剪压缩上传。
对未改变的图片进行本地持久化，减少二次加载图片的延迟。

图片的裁剪压缩直接采用了第三方插件，这里不再过多赘述，主要了解一下flutter的图片加载及缓存模式。
在flutter中ImageProvider作为一个抽象类，他除了定义了图片数据获取和加载的相关接口，还提供了图片数据源及缓存图片的作用。渲染一张图片：

先判断图片数据有没有缓存，如果有，则直接返回ImageStream。
如果没有缓存，则调用load(T key)方法从数据源加载图片数据，加载成功后先缓存，然后返回ImageStream。

查看图片是否缓存及生成缓存数据都与缓存key相关，现在我们看一下缓存的key，因为Map中相同key的值会被覆盖，也就是说key是图片缓存的一个唯一标识，只要是不同key，那么图片数据就会分别缓存。图片缓存key是ImageProvider.obtainKey()方法的返回值，而此方法需要ImageProvider子类去重写。接下来看一下NetworkImage为的obtainKey()的具体实现：

@override
Future<NetworkImage> obtainKey(image_provider.ImageConfiguration configuration) {
  return SynchronousFuture<NetworkImage>(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<UserModel>(context). headImageData, fit: BoxFit.cover, )