Image

Image可加载本地图片和网络图片

加载本地资源图片，如 Image.asset(‘images/logo.png’)；

加载网络图片，如 Image.network('http://xxx/xxx/test.gif') 。

FadeInImage

在加载网络图片的时候，为了提升用户的等待体验，我们往往会加入占位图、加载动画等元素，但是默认的 Image.network 构造方法并不支持这些高级功能，这时候 FadeInImage 控件就派上用场了。

FadeInImage 控件提供了图片占位的功能，并且支持在图片加载完成时淡入淡出的视觉效果。此外，由于 Image 支持 gif 格式，我们甚至还可以将一些炫酷的加载动画作为占位图。
···
FadeInImage.assetNetwork(

placeholder: 'assets/loading.gif', //gif占位

image: 'https://xxx/xxx/xxx.jpg', fit: BoxFit.cover, //图片拉伸模式

width: 200,

height: 200,

)
···

CachedNetworkImage

第三方加载网络图片与前两个最大区别就是，flutter系统自带image加载不带缓存，所以，一般项目中需要加载网络图片，都是使用CachedNetworkImage。

CachedNetworkImage使用方法与Image类似，除了支持图片缓存外，还提供了比FadeInImage更为强大的加载过程占位与加载错误占位，可以支持比用图片占位更灵活的自定义控件占位。

1、引入库

---

pubspec.yaml 中添加插件

在dev_dependencies中，添加cached_network_image第三方包，添加完，点击pub get下载一下这个依赖包

image

2、在你需要用到的页面，引入头文件

---

import 'package:cached_network_image/cached_network_image.dart';

3、使用代码

---

CachedNetworkImage(

imageUrl: "http://xxx/xxx/jpg",

placeholder: (context, url) => CircularProgressIndicator(),

//placeholder: (context, url) =>Image.asset(AppImages.avatar)),

errorWidget: (context, url, error) => Icon(Icons.error),

width：100,

height：200,

fit：BoxFit.fill,//图片展示模式，相当于iOS的contentMode属性

)

还有一种情况就是加载GIF，还想缓存下来，CachedNetworkImage是实现不了的，pub有一个但是不更新了，修改一下还能用，不过没有加载和加载失败的占位符，CachedNetworkImage还有个问题就是本地有缓存了，当再次加载的时候加载占位图片还会显示