一个可以缓存图片的组件 官网插件地址 cached_network_image 3.2.0

一.引入插件

在 pubspec.yaml 文件下新增 cached_network_image (注意空格问题)

dependencies:
  cached_network_image: ^3.2.0

二. 开始封装

图片显示插件需要显示网络图片带缓存和本地图片 如果调到夜间模式则需要加一层蒙版 所以

///带缓存的 图片组件
///[imageUrl] 图片路径
///[height] 高度
///[width]宽度
///[fit] BoxFit
class CaCheImageWidget extends StatelessWidget {
  final String imageUrl; //图片地址可能是网络也可能是本地
  final double? height;//图片的高度
  final double? width;//图片的宽度
  final BoxFit? fit;//图片的缩放模式
///简单的列了几个使用到的,如果需要更多配置点进去源码都有写
  const CaCheImageWidget(
      {Key? key, required this.imageUrl, this.height, this.width, this.fit})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
//通过Provider获取当前是否是夜间模式
    var theme = Provider.of<ThemeViewModel>(context);
//使用Stack是为了给图片盖上一个蒙版
    return Stack(
      children: [
//如果当前文件路径不存在/assets/image 的时候代表是网络图片 走CaChedNetWorkImage 如果不是那就走本地图片显示
//Constants.imageLocalPath 是自己定义的字符串常量 取决你把本地图片放在哪里了
        !imageUrl.contains(Constants.imageLocalPath)
            ? CachedNetworkImage(
                imageUrl: imageUrl,
                width: width ?? double.infinity,
                height: height,
                fit: fit ?? BoxFit.cover,
                placeholder: (
                  BuildContext context,
                  String url,
                ) =>
                    Container(
                      color: Colors.grey[200],
                      child: const Center(child:CircularProgressIndicator()),
                    ),
                errorWidget: (
                  BuildContext context,
                  String url,
                  dynamic error,
                ) =>
                    const Icon(Icons.error))
            : Image.asset(
                imageUrl,
                width: width,
                height: height,
                fit: fit ?? BoxFit.cover,
              ),
        Container(
          width: width,
          height: height,
        //如果是深色模式就加上一个black26 白天就透明色
          color: theme.isDark() ? Colors.black26 : Colors.transparent,
        )
      ],
    );
  }
}