自定义加载网络图片组件，占位图以及错误处理

*这里采用的组件是： cached_network_image

1、首先在自己的全局组件文件中创建一个自定义加载网络图片的无状态组件

直接张贴复制即可，可自行根据需求添加加暴露的参数

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';

class NetWorkImage extends StatelessWidget {
  // 网络图片地址
  final String imageUrl;
  // 宽度
  final double? height;
  // 高度
  final double? width;
  // 图片圆角
  final double? redius;
  // 默认占位图
  final String defaultImageUrl = 'assets/placeholder.png';
  const NetWorkImage(
      {required this.imageUrl,
      this.height,
      this.width,
      this.redius,
      super.key});

  // 公共占位图与错误处理共同抽离
  Widget _buildPlaceholder() {
    return Container(
      decoration: BoxDecoration(
        color: Colors.white38,
        borderRadius: BorderRadius.circular(redius ?? 0),
      ),
      clipBehavior: Clip.antiAlias,
      child: Image.asset(
        defaultImageUrl,
        height: height,
        width: width,
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(redius ?? 0),
      ),
      clipBehavior: Clip.antiAlias,
      child: CachedNetworkImage(
        imageUrl: imageUrl,
        height: height,
        width: width,
        placeholder: (BuildContext context, String url) {
          return _buildPlaceholder();
        },
        errorWidget: (context, url, error) {
          return _buildPlaceholder();
        },
      ),
    );
  }
}

运行时出现插件丢失的提示，需要重新启动项目