Open BerndWessels opened 6 years ago
@BerndWessels you could try to use stack view on top of cached network image. Look at this answer: https://stackoverflow.com/a/48066835.
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.
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()
)
)
)
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(),
),
),
);
any updates?
@otopba Did you try the above suggestion?
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?