图片是一个APP中必不可少的部分，缺少图片的APP会显得格外的单调乏味。
但是同样的，图片也是APP最占据资源和影响体验的组件之一，加载缓慢、重复加载、加载失败、加载完成后导致页面布局发生变化同样会导致用户体验极差。
Flutter虽然自带了Image，但是功能十分简单，不足以满足日常的使用，于是我找到了cached_network_image来满足需求。

官网

Pub.dev地址：https://pub.flutter-io.cn/packages/cached_network_image
GitHub地址：https://github.com/renefloor/flutter_cached_network_image

优势

• 使用简单
• 支持默认图片/加载图片、动图设置（placeholder）
• 支持淡入淡出动画显示
• 支持错误图片设置（errorWidget）
• 支持缓存，减少重复请求

API文档

英文文档：https://pub.flutter-io.cn/documentation/cached_network_image/latest/cached_network_image/cached_network_image-library.html

构造函数

CachedNetworkImage({
  Key key,
  @required this.imageUrl,
  this.imageBuilder,
  this.placeholder,
  this.errorWidget,
  this.fadeOutDuration: const Duration(milliseconds: 300),
  this.fadeOutCurve: Curves.easeOut,
  this.fadeInDuration: const Duration(milliseconds: 700),
  this.fadeInCurve: Curves.easeIn,
  this.width,
  this.height,
  this.fit,
  this.alignment: Alignment.center,
  this.repeat: ImageRepeat.noRepeat,
  this.matchTextDirection: false,
  this.httpHeaders,
  this.cacheManager,
  this.useOldImageOnUrlChange: false,
  this.color,
  this.colorBlendMode,
})

属性解析

• imageUrl: 图片地址，必须
• imageBuilder: 可选构建器，自定义图像的显示。
• placeholder: 初始控件，在加载图片时显示，如加载动画，常用
• errorWidget: 图片加载失败显示
• fadeOutDuration/fadeOutCurve: 淡出动画效果设置
• fadeInDuration/fadeInCurve: 淡入动画效果设置
• width: 图片宽度
• height: 图片高度度
• fit: 填充方式
• repeat: 是否及如何重复背景图像，类似于CSS中的background-repeat
• alignment: 对齐方式
• httpHeaders: 图片请求Header设置，可用于反防盗链使用

使用Demo

new CachedNetworkImage(
  // 设置图片宽度为屏幕宽度
  width: MediaQuery.of(context).size.width,
  // 设置根据宽度计算高度
  height: MediaQuery.of(context).size.width / 40 * 27,
  // 图片地址
  imageUrl: 'xxx',
  // 填充方式为cover
  fit: BoxFit.cover,
  // 加载样式为IOS的加载，居中显示
  placeholder: (context, url) => new Container(
    child: Center(
      child: new CupertinoActivityIndicator(),
    ),
  ),
  // 加载失败后显示自定义的404图片
  errorWidget: (context, url, error) => new Container(
    child: new Image.asset('static/images/404w.png', height: 100, width: 100,),
  ),
),