Image Config

Config placeholder image or error placeholder

Overview

ImagePlaceHolder

class AppImageConfig extends ImageLoaderConfigInterface {
  @override
  PlaceholderWidgetBuilder getPlaceBuilder(double? width, double? height, double? border, Color? borderColor) {
    return (BuildContext context, String url) {
      return Shimmer.fromColors( // Shimmer loading
        baseColor: Colors.grey.shade300,
        highlightColor: Colors.grey.shade100,
        child: Container(color: Colors.grey.shade300),
      );
    };
  }
}

Error placeholder

class AppImageConfig extends ImageLoaderConfigInterface {
  @override
  LoadingErrorWidgetBuilder getErrorBuilder(double? width, double? height, double? border, Color? borderColor) {
    return (BuildContext context, String url, _) {
      return Image.asset("image/path", width: width, height: height, fit: BoxFit.cover);
    };
  }
}

Ciricle image placeholder

class AppImageConfig extends ImageLoaderConfigInterface {
  @override
  PlaceholderWidgetBuilder getCirclePlaceBuilder(double? radius, double? border, Color? borderColor) {
    return (BuildContext context, String url) {
      return ClipOval(
        child: Container(
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            border: Border.all(color: borderColor ?? Colours.transparent, width: border ?? 0),
          ),
          width: radius! * 2,
          height: radius * 2,
          alignment: Alignment.center,
          child: Image.asset("image/path", width: radius * 2, height: radius * 2, fit: BoxFit.fitWidth),
        ),
      );
    };
  }
}

Circle error image placeholder

class AppImageConfig extends ImageLoaderConfigInterface {
  @override
  getCircleErrorBuilder(double? radius, double? border, Color? borderColor) {
    return (BuildContext context, String url, _) {
      return ClipOval(
        child: Container(
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            border: Border.all(color: borderColor ?? Colours.transparent, width: border!),
          ),
          width: radius! * 2,
          height: radius * 2,
          alignment: Alignment.center,
          child: Image.asset("image/path", width: radius * 2, height: radius * 2, fit: BoxFit.fitWidth),
        ),
      );
    };
  }
}