InkWell ripple over top of image in GridTile in Flutter

Question

I'm trying to use InkWell to get a ripple effect on top of an image inside of a GridTile when the user taps on the tile.

I believe the image itself is obscuring the ripple because when I remove the image, I see the ripple.

Below is the code for a single GridTile.

return new InkWell(   onTap: () => debugPrint(s.displayName),   highlightColor: Colors.pinkAccent,   splashColor: Colors.greenAccent,   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( //this is obscuring the InkWell ripple       s.imageSrc,       fit: BoxFit.cover,     ),    ),  ); 

I've tried moving the InkWell to different levels of the hierarchy, using DecorationImage inside a Container, but none of these seem to work to reveal the ripple.

How can I get the ripple to appear on top of the tile/image?

Answer 1

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