How to apply Ink.image() on CachedNetworkImage()?

Question

I want my image to have inkwell effect when tapped, previously I could do that with Ink.image widget and then Provide NetworkImage() as image attribute like this:

Ink.image(
    fit: BoxFit.fitWidth,
    image: NetworkImage(
      product.imageUrl,
    ),
),

But now I want to use CachedNetworkImage() because it has placeholder property to show loading status of my network image but the problem is when I use cachedNetworkImage i can no longer wrap this widget with ink.image because it requires image as an attrubute not any other widget.

Answer 1

Ink.image constructor requires image param to be a ImageProvider, not a widget. You can use CachedNetworkImageProvider instead of CachedNetworkImage like this:

Ink.image(
    fit: BoxFit.fitWidth,
    image: CachedNetworkImageProvider(
       product.imageUrl,
   )
),

However with this you'll lose placeholder capacity. However you can use CachedNetworkImageProvider createStream method to get an ImageStream that can be listened for errors and completion, with which you can create your own custom widget that updates the UI based on this stream.

Answer 2

You can use the imageBuilder from the CachedNetworkImage and pass the imageProvider to Ink.image.

Here's a sample code.

CachedNetworkImage(
  imageUrl: "$imagePath",
  imageBuilder: (context, imageProvider) {
    return Ink.image(
      image: imageProvider,
      fit: fit,
    );
  },
)