【Flutter】【package】cached_network_image 图片缓存插件

---

前言

可以缓存图片，在此调用的时候，可以减少网络资源和流量的浪费

https://pub.flutter-io.cn/packages/cached_network_image
cached_network_image: ^3.2.2

---

一、cached_network_image有什么作用？

可以缓存图片，在此调用的时候，可以减少网络资源和流量的浪费。并可以通过build 创建 在失败或者是加载中的情况下，图片的widget

二、使用步骤

1.引入库

pubspec.yaml 中添加插件，并引入

import "package:cached_network_image/cached_network_image.dart";

2.使用

1. 使用占位符

    CachedNetworkImage(
      imageUrl: "http://via.placeholder.com/350x150",
      //占位符，加载中的状态
      placeholder: ((context, url) =>
          const CircularProgressIndicator()),
      errorWidget: (context, url, error) {
        return const Icon(Icons.error);
      },
    ),

2. 使用进度加载widget

 CachedNetworkImage(
            imageUrl:
                "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.gpbctv.com%2Fuploads%2F20210424%2Fzip_1619246266UkP6CL.jpg&refer=http%3A%2F%2Fwww.gpbctv.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668408563&t=c514d31c21bf537fff3eea0da917b6a3-",
            //占位符,根据加载的进度显示进度条
            progressIndicatorBuilder: (context, url, downloadProgress) {
              return CircularProgressIndicator(
                  value: downloadProgress.progress);
            },
            errorWidget: (context, url, error) {
              return const Icon(Icons.error);
            },
          ),

3.如果上面的图片已经加载了，那你要调用该图片的缓存可以这样使用

 //如果上面的图片已经加载了，那你要调用该图片的缓存可以这样使用
          const Image(
              image: CachedNetworkImageProvider(
                 "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.gpbctv.com%2Fuploads%2F20210424%2Fzip_1619246266UkP6CL.jpg&refer=http%3A%2F%2Fwww.gpbctv.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668408563&t=c514d31c21bf537fff3eea0da917b6a3-")),

4.给他图片缓存widget 添加自己需要的widget

 CachedNetworkImage(
     imageUrl: "http://via.placeholder.com/200x150",
     imageBuilder: (context, imageProvider) {
       return Container(
         decoration: BoxDecoration(
             image: DecorationImage(
                 image: imageProvider,
                 fit: BoxFit.cover,
                 colorFilter: ColorFilter.mode(
                     Colors.pink, BlendMode.colorBurn))),
       );
     },
     placeholder: ((context, url) =>
         const CircularProgressIndicator()),
     errorWidget: (context, url, error) {
       return const Icon(Icons.error);
     },
   )

---

总结

cached_network_image 图片缓存可以减少网络资源的使用，减少流量和数据加载的时间。