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

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,
    );
  },
)