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