InkWell not working bug

[BerndWessels]

I tried every possible combination, but it seems to be impossible to get the ripple effect working on top of the cached network image.

It's like the cached network image has a huge magic z index.

Anybody can fix this or has a workaround?

[ZeDzislaw]

@BerndWessels you could try to use stack view on top of cached network image. Look at this answer: https://stackoverflow.com/a/48066835.

[creativebracket]

Got this working. This is more on how the ripple effect works. From the docs:

The ink splashes aren't visible! If there is an opaque graphic, e.g. painted using a Container, Image, or DecoratedBox, between the Material widget and the InkWell widget, then the splash won't be visible because it will be under the opaque graphic. This is because ink splashes draw on the underlying Material itself, as if the ink was spreading inside the material.

Source

Solution is a tree structure that consists of Material -> Ink -> InkWell widgets where the Ink widget ensures that the image or decoration receives the ripple effect too.

Here's my code:

Card( // Renders a `Material` in its build method
  child: Ink.image(
    image: CachedNetworkImageProvider(imageUrl), // Using CachedNetworkImageProvider
    fit: BoxFit.cover,
    height: 200,
    child: InkWell(
      onTap: () {},
      child: Container()
    )
  )
)

Source

[creativebracket]

And I got this working with CachedNetworkImage widget:

CachedNetworkImage(
  imageUrl: imageUrl,
  imageBuilder: (context, imageProvider) {
    return Material(
      color: Colors.blueAccent,
      child: Ink.image(
        image: imageProvider,
        fit: BoxFit.cover,
        child: InkWell(onTap: () {}),
      ),
    );
  },
  placeholder: (context, url) => Center(
    child: SizedBox(
      width: 40,
      height: 40,
      child: CircularProgressIndicator(),
    ),
  ),
);

[otopba]

any updates?

[graphicbeacon]

@otopba Did you try the above suggestion?