Flutter 加载网络图片之：FadeInImage + Image.network-爱代码爱编程

想实现的效果：
1、通过网络url加载图片（支持 gif）
2、加载之前使用默认占位图
3、加载出现问题后要做兜底处理

其实可以通过先将图片资源加载到本地文件中，然后读出来设置，虽然要绕一圈，但不失为一个好方案。

但是，为了熟悉 Flutter 的图片相关知识，还是采用官方提供的 API 来试着实现。

下面是最终方案：

	FadeInImage(
        image: _addImageLoadListener(imageUrl),
        // TODO 未加载出来前的占位图
        placeholder: AssetImage("xxx/xxx.jpg"),
        fit: BoxFit.fill,
        imageErrorBuilder: (context, error, stackTrace) {
          // TODO 图片加载错误后展示的 widget
          // print("---图片加载错误---");
          // 此处不能 setState
          return AssetImage("xxx/xxx.jpg");
        },
    )

  ImageProvider _addImageLoadListener(String url) {
    Image image = Image.network(url);
    image.image
        .resolve(ImageConfiguration.empty)
        .addListener(ImageStreamListener((info, synchronousCall) {
          // 图片加载成功
          // print("---图片加载成功---${info.toString()}---${err.toString()}");
          // 要到图片加载出来才算展示
          // TODO gif 播放过程中会一直回调
          if (!_isShow) {
            setState(() {
              _isShow = true;
            });
          }
        }, onChunk: (event) {
          // 也可以这样
          /*if(event.cumulativeBytesLoaded/event.expectedTotalBytes>=1){
            _adEvent(1);
          }*/
        }, onError: (_, __) {
          setState(() {
            _isFail = true;
          });
        }));
    return image.image;
  }

虽然可通过下面的方式实现同样的效果，但是会遇到以下问题：
1、errorBuilder 没有回调，刚开始 demo 时好像可以，后面一直不行，邪 ~
2、loadingBuilder 在加载网络图片过程中一直回调，通过 AS 的 flutter performance 检测工具，会发现加载过程中，相关 widget 一直在刷新。
3、frameBuilder，对于普通图片，只有一帧的，此方法只会回调两次，而对于 gif 图片，即使图片资源已加载完成，gif 图片播放过程中，此方法会一直回调，通过 AS 的 flutter performance 检测工具，会发现相关 widget 一直在刷新，除非移除这个 widget。

	Image.network(
          "xxx",
          frameBuilder: (context, child, frame, wasSynchronouslyLoaded){
            return child;
          },
          loadingBuilder: (context, child, loadingProgress){
            return child;
          },
          errorBuilder: (context, error, stackTrace){
            return Container();
          },
	)

有空再细致研读一下源码 ~