[移动开发]flutter 图片加载

///网络图片组件(带占位图)
// ignore: must_be_immutable
class MNetWorkImageWidget extends StatelessWidget {
  final String imageUrl; //图片路径
  final double width; //宽度
  final double height; //高度
  final double radius; //圆角
  final BoxFit fit; //填充模式
  final bool isNeedPlaceholder; //是否需要占位图(默认需要)
  final Color placeholderBgColor; //占位图背景颜色
  final VoidCallback didClickCallBack; //点击事件回调
  Widget placeholderWidget; //占位图组件
  final Duration fadeOutDuration; //渐入渐出动画持续时间

  ///属性:
  ///key: 组件key
  ///width: 宽度
  ///height: 高度
  ///radius: 圆角
  ///fit: 图片自适应模式(默认cover)
  ///isNeedPlaceholder: 是否需要占位图(默认需要)
  ///placeholderBgColor: 占位图背景颜色
  ///placeholderWidget: 占位图组件
  ///didClickCallBack: 点击事件回调
  ///fadeOutDuration: 渐入渐出动画持续时间
  GMNetWorkImageWidget({
    Key key,
    @required this.imageUrl,
    this.width,
    this.height,
    this.radius = 0.0,
    this.fit = BoxFit.cover,
    this.isNeedPlaceholder = true,
    this.placeholderBgColor = const Color(0xFFF0F0F0),
    this.placeholderWidget,
    this.didClickCallBack,
    this.fadeOutDuration,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    if (didClickCallBack == null) {
      return _buildImage();
    } else {
      return GestureDetector(
        child: _buildImage(),
        onTap: didClickCallBack,
      );
    }
  }

  Widget _buildImage() {
    return _buildClipRect(
      MCachedNetworkImage(
        width: width,
        height: height,
        fit: fit,
        imageUrl: imageUrl,
        placeholder: this._getCurrentPlaceholderWidget(),
        fadeOutDuration: this.fadeOutDuration,
      ),
    );
  }

  Widget _buildClipRect(Widget child) {
    if (this.radius > 0) {
      return ClipRRect(
        borderRadius: BorderRadius.circular(radius),
        child: child,
      );
    } else {
      return child;
    }
  }

  //获取占位图组件
  Widget _getCurrentPlaceholderWidget() {
    if (this.placeholderWidget != null) {
      return _buildClipRect(
        this.placeholderWidget,
      );
    } else {
      if (!isNeedPlaceholder) {
        return _buildClipRect(
          Container(
            width: this.width,
            height: this.height,
          ),
        );
      }

      String placeholderName = "default_29.png";
      if (width != null && width > 130 && width <= 180) {
        placeholderName = "default_44.png";
      } else if (width != null && width > 180) {
        placeholderName = "default_56.png";
      }
      String placeholderUrl = "assets/$placeholderName";
      return _buildClipRect(
        Container(
          width: width,
          height: height,
          color: placeholderBgColor,
          alignment: Alignment.center,
          child:
              Image.asset(placeholderUrl, package: "cached_network_image", fit: BoxFit.fill),
        ),
      );
    }
  }
}

@Deprecated('请使用 MNetWorkImageWidget 组件')
class MCachedNetworkImage extends StatelessWidget {
  const MCachedNetworkImage(
      {Key key,
      this.imageUrl,
      this.fit = BoxFit.cover,
      this.width,
      this.height,
      this.during,
      this.fadeOutDuration,
      this.alignment,
      this.placeholder})
      : super(key: key);

  final String imageUrl;
  final BoxFit fit;
  final double width;
  final double height;
  final dynamic during;
  final Duration fadeOutDuration;
  final Alignment alignment;
  final Widget placeholder;

  @override
  Widget build(BuildContext context) {
    // return Image.network(
    //   imageUrl,
    //   width: width,
    //   height: height,
    //   alignment: alignment ??= Alignment.center,
    //   fit: fit ??= BoxFit.cover,
    // );
    // return CachedNetworkImage(
    //   imageUrl: imageUrl,
    //   imageBuilder: (BuildContext context, ImageProvider provider) {
    //     return Container(
    //       height: 60,
    //       width: 100,
    //       decoration: BoxDecoration(
    //         image: DecorationImage(
    //           image: provider,
    //           fit: BoxFit.cover,
    //         ),
    //       ),
    //     );
    //   },
    // );
    return CachedNetworkImage(
      imageUrl: imageUrl ?? "",
      fit: fit,
      width: width,
      height: height,
      alignment: Alignment.center,
      useOldImageOnUrlChange: true,
      fadeOutDuration: fadeOutDuration ?? Duration(milliseconds: 0),
      placeholder: (context, url) => placeholder,
      errorWidget: (context, url, error) => placeholder,
      // placeholder: placeholder ??= ((context, url) => CircularProgressIndicator()),
    );
  }
}

/// A Calculator.
class Calculator {
  /// Returns [value] plus 1.
  int addOne(int value) => value + 1;
}

使用方法：

//左边图片。 assets/images/find_goods/xx.png为图片本地路径
  Widget build_left_picture(){
    return MNetWorkImageWidget(
      imageUrl: goodsModel.url,
      width: 100,
      height: 100,
      radius: 5,
      placeholderWidget: Image.asset("assets/images/find_goods/xx.png", width: 100, height: 100),
imageUrl: supplierModel.mchIconUrl ?? "",
    );
  }



placeholderWidget是占位图，加载本地图片
imageUrl是加载网络图片