Flutter Image 本地&网络图片、圆形图片、CachedNetworkImage Widget 和 FadeInImage Widget

一、Image Widget

1、使用网络图片 `Image.network`

Image.network 支持 Flutter 加载并渲染网络图片，构造函数如下：

其中 src 是 String 类型，并且是必填的第一个参数，其他的都是命名参数

fit 属性用来指定图片的适配方式，和 weex 的 image 标签的 resize 属性或者 rax 的 resizeMode 效果一致。

使用 Image.network 加载网络图片：

String IMAGE_SRC = 'https://picsum.photos/id/142/600/400';

Image.network(
        IMAGE_SRC,
        alignment: Alignment.bottomRight,
        color: Colors.blue,
        colorBlendMode: BlendMode.colorBurn,
        fit: BoxFit.cover, // 填充拉伸裁剪
        width: 100.0,
        height: 100.0
        // repeat: ImageRepeat.repeatX, // 重复
      )

上面使用 color: Colors.blue, colorBlendMode: BlendMode.colorBurn, 做了颜色覆盖，最终效果：

2、ClipOval 实现圆形图片

通过 ClipOval 可以剪切 Image.network 加载的图片

直接将 Image.network 放在 ClipOval 的 child 属性中即可，需要制定图片的宽度和高度

ClipOval(
      child: Image.network(
        IMAGE_SRC,
        fit: BoxFit.cover,
        width: 100,
        height: 100,
        // color: Colors.black
      ),
    );

效果：

3、利用 Container 实现圆形图片

借助 Container 的 BorderRadius 也一样可以实现一个圆形图片

需要注意的是，使用 Container 实现的圆形图片，不能将 Image 直接放在 Container 的 child 中，而是应该放在 decoration 中

return Container(
      width: 100,
      height: 100,
      decoration: BoxDecoration(
        color: Colors.pink,
        borderRadius: BorderRadius.all(Radius.circular(50)),
        image: DecorationImage(
          image: NetworkImage(IMAGE_SRC),
          fit: BoxFit.cover,
        ),
      ), // 通过 container 实现圆角
    );

上面代码中，通过 borderRadius 指定了 Radius.circular(50) 实现一个圆形的 Container

然后在 image 属性中通过 DecorationImage 塞入了一个 image，不过此时不能使用 Image.network，而是应该直接使用 NetworkImage 将 IMAGE_SRC 传入即可。

效果：

4、Image.asset 本地图片

Image.asset 可以用来加载本地的图片素材，加载本地图片素材是需要在依赖中声明的

在 pubspec.yaml 中指定 assets 字段，配置了 2.0x 和 3.0x 的文件

  # To add assets to your application, add an assets section, like this:
  assets: 
   - images/demo.png
   - images/2.0x/demo.png
   - images/3.0x/demo.png

声明之后，重新执行 flutter pub get，

加载本地代码：

return Container(
      child: Image.asset('images/demo.png', fit: BoxFit.contain),
      width: 100,
      height: 100,
    );

效果：

二、使用 `cached_network_image` 图片库

上面 Image.network 记载图片没有任何的缓存，每次都是重新加载时间比较慢，同时没有任何的动画效果

cached_network_image 这个库实现了图片缓存加载和载入效果。

库文档地址：https://pub.dev/packages/cached_network_image

dependencies:
  flutter:
    sdk: flutter
  cached_network_image: ^0.8.0

使用 CachedNetworkImage Widget：

    return Container(
      child: CachedNetworkImage(
        width: 100,
        height: 50,
        fit: BoxFit.cover,
        imageUrl: IMAGE_SRC,
        placeholder: (context, url) => CircularProgressIndicator(
            // backgroundColor: Colors.pink,
            ),
        errorWidget: (context, url, error) => Icon(Icons.error),
      ),
    );

CachedNetworkImage Widget 支持传入 imageUrl 图片的地址、placeholder 加载方式（或者家在动画），errorWidget 加载错误的图示

上面的加载动画中我使用了 CircularProgressIndicator Widget 可以看到明显的加载动画和过度效果

三、使用 `FadeInImage` 记载图片过渡效果

除了使用上面 CachedNetworkImage 自带过度效果外，还可以使用 FadeInImage Widget 实现过度效果

FadeInImage 本身支持指定本地图片作为 loading 的图标

需要注意的是本地图片需要在 pubspec.yaml 中声明 assets：

  # To add assets to your application, add an assets section, like this:
  assets: 
   - images/demo.png
   - images/2.0x/demo.png
   - images/3.0x/demo.png
   - images/loading.gif

示例代码：

    return FadeInImage.assetNetwork(
      placeholder: 'images/loading.gif',
      image: IMAGE_SRC,
      width: 100,
      height: 50,
    );

结果：

四、完整代码

github 代码示例：

https://github.com/postbird/FlutterHelloWorldDemo/blob/master/demo1/lib/bak/main.7-Image.dart

Postbird

一、Image Widget

1、使用网络图片 Image.network