CODEWITHSUNDEEP
flutterflutter-layoutflutter-image
Mateen Kiani
Mateen Kiani

Reputation: 3273

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

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.

Upvotes: 4

Views: 2191

Answers (2)

ibhavikmakwana
ibhavikmakwana

Reputation: 10121

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

Upvotes: 6

Ryosuke
Ryosuke

Reputation: 3892

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.

Upvotes: 4

Related Questions