InkWell ripple over top of image in GridTile in Flutter
Using Stack
we can bring Material
and InkWell
over the image. To stretch Material we are going to use Positioned.fill
widget.
Stack(
children: <Widget>[
Image( ... ),
Positioned.fill(
child: Material(
color: Colors.transparent,
child: InkWell(
onTap: () { ... },
),
),
),
],
);
DartPad | Gist
Screenshot
This screenshot is taken from given dartpad link.
I was able to get a ripple to appear over the image by using a Stack and wrapping the InkWell in a Material widget.
return new Stack(children: <Widget>[
new Positioned.fill(
bottom: 0.0,
child: new GridTile(
footer: new GridTileBar(
title: new Text(s.displayName),
subtitle: new Text(s.gameName),
backgroundColor: Colors.black45,
trailing: new Icon(
Icons.launch,
color: Colors.white,
),
),
child: new Image.network(s.imageSrc, fit: BoxFit.cover)),
),
new Positioned.fill(
child: new Material(
color: Colors.transparent,
child: new InkWell(
splashColor: Colors.lightGreenAccent,
onTap: () => _launchStream(s.displayName),
))),
]);
I think this would be a better way to show ripple effect over image.
Ink.image(
image: AssetImage('sample.jpg'),
fit: BoxFit.cover,
child: InkWell(
onTap: () {},
),
),
The root cause is that Flutter renders views in descending order. when we put our image as the child of InkWell, the effect is covered by that image.
Find out more references here:
The Ink widget
Create a Rounded Image Icon with Ripple Effect in Flutter