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?

Thant's pretty strange that Image has a higher elevation than InkWell indeed, despite the hierarchy — Ihor Klimov, May 29 '18 at 11:49

score 80 · Accepted Answer · answered Jan 02 '18 at 19:39

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 have transparent inkwell , using it inside material also makes it opaque to background image — Mangaldeep Pannu, Apr 17 '19 at 05:48

Jaden Gu · Answer 2 · 2020-05-18T05:56:15.173

70

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

edited May 18 '20 at 05:56

answered Jul 26 '18 at 09:47

Jaden Gu

9,143
3
23
26

3

This solution doesnt allow to create rounded corners for the image – kashlo Nov 10 '20 at 13:38
1

I considered this approach, but I believe there is no way to get this to work with a more complex widget (e.g. Container which contains text and image)? – Ben Butterworth Mar 21 '21 at 21:35

TheMisir · Answer 3 · 2020-05-06T18:42:40.093

67

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.

edited May 06 '20 at 18:42

answered Dec 13 '19 at 06:20

TheMisir

4,083
1
27
37

2

Tried all suggestions here. This one works the best for me since I have `AspectRatio` and `FadeInImage` for the main layer. – Schultz9999 Apr 19 '20 at 19:11
@TheMisir this is the only soultion which worked with cachednetwork image Loved it! – Rajesh Jun 14 '20 at 12:55
Pretty nice, works well with FadeInImage present inside a card also – Germa Vinsmoke Mar 09 '21 at 06:48
Set `InkWell` splashColor to `Colors.grey.withOpacity(0.5)` to get better ripple animation – omega_mi May 14 '23 at 21:00

score 16 · Answer 4 · answered Feb 23 '20 at 13:27

We have created this simple Widget to paint an ink reaction on top of any given child.

class InkWrapper extends StatelessWidget {
  final Color splashColor;
  final Widget child;
  final VoidCallback onTap;

  InkWrapper({
    this.splashColor,
    @required this.child,
    @required this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        child,
        Positioned.fill(
          child: Material(
            color: Colors.transparent,
            child: InkWell(
              splashColor: splashColor,
              onTap: onTap,
            ),
          ),
        ),
      ],
    );
  }
}

Lost formatting of the child widget. Fixed using `Positioned.fill(child: child)` — OM KALE, May 18 '21 at 05:33

score 13 · Answer 5 · answered Dec 03 '19 at 11:09

13

Screenshot:

SizedBox(
  height: 200,
  child: Ink(
    decoration: BoxDecoration(
      image: DecorationImage(
        image: ExactAssetImage("chocolate_image"),
        fit: BoxFit.cover,
      ),
    ),
    child: InkWell(
      onTap: () {},
      splashColor: Colors.brown.withOpacity(0.5),
    ),
  ),
)

answered Dec 03 '19 at 11:09

CopsOnRoad

237,138
77
654
440

Excellent approach. Works even with `AspectRatio`. What would be even better if I could use `FadeInImage`. – Schultz9999 Apr 19 '20 at 19:05

score -4 · Answer 6 · 2020-03-23T10:47:03.373

-4

wrap InkWell inside Material Widget

Material(   
  child : InkWell(          
      child : YourWidget     
  )      
)

edited Mar 23 '20 at 10:47

answered Mar 23 '20 at 09:24

InkWell ripple over top of image in GridTile in Flutter

6 Answers6

Screenshot

Linked

Related