fromNetwork static method

Widget fromNetwork(
  1. String? url,
  2. {double? width,
  3. double? height,
  4. Color? color,
  5. BoxDecoration? decoration,
  6. EdgeInsets? padding,
  7. EdgeInsets? margin,
  8. String? placeholder,
  9. bool showPlaceholder = true,
  10. bool isCircle = false,
  11. BoxFit fit = BoxFit.contain,
  12. BoxFit placeholderFit = BoxFit.contain,
  13. bool backOffSizing = true,
  14. bool enableMirror = false}
)

Fetch the image from url, cache it and load into a proper widget

backOffSizing determine whether to use backOff dimension if not set eg. if width is not set, use height instead enableMirror will make your image mirrored!

Implementation

static Widget fromNetwork(String? url,
    {double? width,
    double? height,
    Color? color,
    BoxDecoration? decoration,
    EdgeInsets? padding,
    EdgeInsets? margin,
    String? placeholder,
    bool showPlaceholder = true,
    bool isCircle = false,
    BoxFit fit = BoxFit.contain,
    BoxFit placeholderFit = BoxFit.contain,
    bool backOffSizing = true,
    bool enableMirror = false}) {
  double? measuredHeight = height ?? (backOffSizing ? width : null);
  double? measuredWidth = width ?? (backOffSizing ? height : null);
  final placeholderAssetPath = placeholder ?? placeholderPath;
  Widget placeholderImage = const Icon(Icons.image, size: 48);
  if (placeholderAssetPath != null) {
    placeholderImage = fromLocal(
      placeholderAssetPath,
      width: width,
      height: height,
      decoration: decoration,
      padding: padding,
      margin: margin,
      isCircle: isCircle,
      fit: placeholderFit,
      backOffSizing: backOffSizing,
    );
  }
  Widget emptySpace = SizedBox(
    height: measuredHeight,
    width: measuredWidth,
  );
  if (url == null) {
    return showPlaceholder ? placeholderImage : emptySpace;
  }
  if (url.endsWith('.svg')) {
    return SvgPicture.network(
      url,
      height: measuredHeight,
      width: measuredWidth,
      color: color,
      fit: fit,
      placeholderBuilder: (context) {
        return showPlaceholder ? placeholderImage : emptySpace;
      },
    );
  } else if (url.endsWith('.gif')) {
    return Image.network(
      url,
      height: measuredHeight,
      width: measuredWidth,
      color: color,
      fit: fit,
      errorBuilder: (context, error, stackTrace) =>
          showPlaceholder ? placeholderImage : emptySpace,
      loadingBuilder: (BuildContext context, Widget child,
          ImageChunkEvent? loadingProgress) {
        if (loadingProgress == null) {
          return child;
        }
        return showPlaceholder ? placeholderImage : emptySpace;
      },
    );
  }
  return CachedNetworkImage(
    imageUrl: url,
    color: color,
    imageBuilder: (context, imageProvider) {
      final decorationImage = DecorationImage(image: imageProvider, fit: fit);
      return Container(
        padding: padding,
        margin: margin,
        width: measuredWidth,
        height: measuredHeight,
        decoration: isCircle == true
            ? _circle.copyWith(image: decorationImage)
            : (decoration ?? const BoxDecoration())
                .copyWith(image: decorationImage),
      );
    },
    errorWidget: (context, url, _) =>
        showPlaceholder ? placeholderImage : emptySpace,
    placeholder: (context, url) =>
        showPlaceholder ? placeholderImage : emptySpace,
  ).makeMirror(enableMirror);
}