从网络获取

Image.network(
              'https://cn.bing.com/th?id=OIP.xq1C2fmnSw5DEoRMC86vJwD6D6&pid=Api&rs=1',
              scale: 2,
              frameBuilder: (BuildContext context, Widget child, int frame, bool wasSynchronouslyLoaded) {
                return Padding(
                  padding: EdgeInsets.all(10.0),
                  child: child,
                );
              },
              loadingBuilder: (BuildContext context, Widget child, ImageChunkEvent loadingProgress) {
                if (loadingProgress == null)
                    return child;
                    return Center(
                     child: CircularProgressIndicator(
                      value: loadingProgress.expectedTotalBytes != null
                           ? loadingProgress.cumulativeBytesLoaded / loadingProgress.expectedTotalBytes
                      : null,
                  ),
                );
              },
              //fit: BoxFit.fill,
              alignment: Alignment.center,
              repeat: ImageRepeat.noRepeat,
              centerSlice: Rect.fromLTRB(10, 10, 10, 10),
              matchTextDirection:false,
              gaplessPlayback: false,
              filterQuality: FilterQuality.low,
          )

1. scale

是指缩小倍数

2. frameBuilder

图片帧处理，比如图片边距设置，加载动画之类的。

3. loadingBuilder

图片加载的时候一些处理

4. fit
类似 Android 的 ImageView 的 scaleType

fit.png

5. alignment

对齐的方式

image.png

6. repeat

控件剩余没占满的空间如何绘制，默认 ImageRepeat.noRepeat

ImageRepeat.repeat 在x和y方向上重复图像，直到填充框
ImageRepeat.repeatX 在x方向上重复图像，直到水平填充框
ImageRepeat.repeatY 在y方向重复图像，直到垂直填充框
ImageRepeat.noRepeat 将盒子的未覆盖部分保持透明

7. centerSlice

将图片进行切割

image.png

8. matchTextDirection

是否在TextDirection的方向上展开图片。

9. gaplessPlayback

图像路径发生变化时，是否继续不加载新图片，默认 false

10. filterQuality

图像过滤器的质量级别。(渲染模式的质量)，默认 FilterQuality.low

image.png

从本地加载图片

项目中创建 images 文件夹。

images

然后再 pubspec.yaml 里面配置图片

  assets:
      - images/wx_icon.png

最后使用为：

Image.asset("images/wx_icon.png")

其他属性和 network 的一样。

从本地文件夹加载图片

new Image.file(new File("对应文件夹里面图片路径")),

加载头像

new CircleAvatar(
              backgroundImage: new NetworkImage('https://cn.bing.com/th?id=OIP.xq1C2fmnSw5DEoRMC86vJwD6D6&pid=Api&rs=1'),
              radius: 100.0,
            ),

image.png