Flutter中，通过Image组件来加载并显示图片,可以从asset、文件、内存以及网络获取图片，都需要实现不同的ImageProvider。
Flutter 图片加载方式:
Image() // 通用方法，使用ImageProvider实现，如下方法本质上也是使用的这个方法
Image.asset // 加载资源图片
Image.file // 加载本地图片文件
Image.network // 加载网络图片
Image.memory // 加载Uint8List资源图片
从asset中加载图片
AssetImage是实现了从Asset中加载图片的ImageProvider。
- 在工程根目录下创建一个
images目录，并将图片avatar.png拷贝到该目录。
也可以设置其他自定义目录,如lib下面的images,方便管理。 - 在
pubspec.yaml中的flutter部分添加如下内容：
assets:
- images/avatar.png
- images/a_dot_burr.jpeg
- images/a_dot_ham.jpeg
如果不想像这样每添加一张图片都添加一条配置，直接包含某一个目录中的所有的资源，直接指定目录的名称：
assets:
- images/
注意: 由于 yaml 文件对缩进严格，所以必须严格按照每一层两个空格的方式进行缩进，此处assets前面应有两个空格。
- 加载图片
Image(
image: AssetImage("images/avatar.png"),
width: 100.0
);
或者使用Image提供的一个快捷构造函数Image.asset用于从asset中加载图片：
Image.asset("images/avatar.png",
width: 100.0,
)
从网络加载图片
Image(
image: NetworkImage(
"https://avatars2.githubusercontent.com/u/20411648?s=460&v=4"),
width: 100.0,
)
或者使用Image提供的一个快捷的构造函数Image.network用于从网络加载图片：
Image.network(
"https://avatars2.githubusercontent.com/u/20411648?s=460&v=4",
width: 100.0,
)
注意一些点:
1.Image 的width、height参数，当不指定宽高时，图片会根据当前父容器的限制，尽可能的显示其原始大小。
如果只设置width、height的其中一个，那么另一个属性默认会按比例缩放,可以通过fit属性来指定适应规则,具体介绍参考文档。
2.Image缓存，Image加载过得图片只在内存中会有缓存，无法缓存本地。一旦应用关闭，这个缓存就没有了，下次重新启动还会从网络下载并缓存。
cached_network_image
一个用于显示来自Internet的图像并将它们保存在缓存目录中的flutter库，可以用来加载和缓存网络图像，也可以与占位符和错误小部件一起使用。
import 'package:cached_network_image/cached_network_image.dart';
CachedNetworkImage(
imageUrl: "http://via.placeholder.com/350x150",
placeholder: (context, url) => CircularProgressIndicator(),//CircularProgressIndicator 属于cached_network_image库
errorWidget: (context, url, error) => Icon(Icons.error),
),
transparent_image
有默认占位图和淡入效果。
import 'package:transparent_image/transparent_image.dart';
FadeInImage.memoryNetwork(
placeholder: kTransparentImage, //透明图,kTransparentImage 属于 transparent_image 库
image: 'http://via.placeholder.com/350x150',
);
可以使用应用内的图片来做占位图:
FadeInImage.assetNetwork(
placeholder: "lib/images/a.jpeg",
image: "http://via.placeholder.com/350x150")