How to use placeholder with cached network image provider in flutter-CodePudding

I have an Ink.image and I want to assign a cached network image to it but since it was throwing an error

The argument type 'Object' can't be assigned to the parameter type 'ImageProvider'.

I had to use CachedNetworkImageProvider instead. The problem is that it doesnt have a place holder property, so I looked up the official example and I saw this:

"When you want to have both the placeholder functionality and want to get the imageprovider to use in another widget you can provide an imageBuilder:"

CachedNetworkImage(
  imageUrl: "http://via.placeholder.com/200x150",
  imageBuilder: (context, imageProvider) => Container(
    decoration: BoxDecoration(
      image: DecorationImage(
          image: imageProvider,
          fit: BoxFit.cover,
          colorFilter:
              ColorFilter.mode(Colors.red, BlendMode.colorBurn)),
    ),
  ),
  placeholder: (context, url) => CircularProgressIndicator(),
  errorWidget: (context, url, error) => Icon(Icons.error),
),

So I tried to test this code in my application but I still gets the same error

The argument type 'Object' can't be assigned to the parameter type 'ImageProvider'.

This is my code :


child: Ink.image(
                image:
                CachedNetworkImage(
                  imageUrl: "http://via.placeholder.com/200x150",
                  imageBuilder: (context, imageProvider) => Container(
                    decoration: BoxDecoration(
                      image: DecorationImage(
                          image: imageProvider,
                          fit: BoxFit.cover,
                          colorFilter:
                          ColorFilter.mode(Colors.red, BlendMode.colorBurn)),
                    ),
                  ),
                  placeholder: (context, url) => CircularProgressIndicator(),
                  errorWidget: (context, url, error) => Icon(Icons.error),
                ),

CodePudding user response：

Either then your method you can try this method as below widget lies in most of the test cases.

Widget getNetworkImage({
  double? height = 45.0,
  double? width = 45.0,
  double? borderRadius = 10.0,
  bool? showCircularProgressIndicator,

  ///this is used when you don't want to give fix height and width to image (SUGGESTION:  fit: BoxFit.scaleDown for better UI)
  bool? isSizeNull,
  BoxFit? fit,
  required String url,
}) {
  return ClipRRect(
    borderRadius: BorderRadius.circular(borderRadius ?? 10.0),
    child: SizedBox(
      height: (isSizeNull ?? false) ? null : height,
      width: (isSizeNull ?? false) ? null : width,
      child: CachedNetworkImage(
        fit: fit ?? BoxFit.fill,
        imageUrl: url,
        placeholder: (context, url) {
          showCircularProgressIndicator ??= true;
          if (showCircularProgressIndicator == true) {
            return Center(
              child: Container(
                padding: const EdgeInsets.all(7),
                decoration: BoxDecoration(
                  // color: const Color(0xff0C59EA).withOpacity(0.35),
                  borderRadius: BorderRadius.circular(10),
                ),
                child: Platform.isAndroid ? const CircularProgressIndicator() : const CupertinoActivityIndicator(),
              ),
            );
          } else {
            return const Center(child: SizedBox());
          }
        },
        errorWidget: (context, url, error) {//<== add your widget in most cases try to use placeholder of your project for better UX.
          return Image.asset(((height ?? 45) >= 100 || (width ?? 45.0) >= 100) ? Assets.imagesCommonPlaceholder : Assets.imagesLogoPlaceholder, fit: BoxFit.cover);
        },
      ),
    ),
  );
}

CodePudding user response：

The layout looks wrong. You should be passing the image provider to ink. Image

CachedNetworkImage(
  imageUrl: "http://via.placeholder.com/200x150",
  imageBuilder: (context, imageProvider) {
    return Ink.image(
      image: imageProvider,
      fit: fit,
    );
  },
 placeholder: (context, url) => CircularProgressIndicator(),
)