How to prevent ripple effect on surrounding InkWell when tapped on InkWell inside

Question

Let's say that I have this widget:

Card(
  child: InkWell(
    onTap: () {},
    child: Padding(
      padding: const EdgeInsets.all(28.0),
      child: RaisedButton(
        child: Text('Test'),
        onPressed: () {},
      ),
    ),
  ),
),

I would like to disable (prevent showing) ripple effect on Card/InkWell only when the RaisedButton is tapped, but to show it when the Card is tapped (i.e. outside the button). Is there any way to achieve this effect?

I think the generalized question can be: How to prevent ripple effect on surrounding InkWell when tapped on InkWell inside? If you take a look at the source code then you can see that RaisedButton has Material and InkWell widgets that cause ripple.

Here is the full sample code.

@Eugene I want to show ripple when tapped on the Card itself — Dominik Roszkowski, Oct 08 '19 at 11:10
Have you tried [IgnorePointer](https://stackoverflow.com/questions/50600747/flutter-ignore-touch-events-on-a-widget)? — Tokenyet, Oct 08 '19 at 11:11

imaN NeoFighT · Accepted Answer · 2019-10-08T11:22:07.433

7

If you want a quick hack, check it out:

Container(
  width: 180,
  height: 120,
  child: Stack(
    children: <Widget>[
      Card(
        child: InkWell(
          onTap: () {},
        ),
      ),
      Center(
        child: RaisedButton(
          child: Text('Test'),
          onPressed: () {},
        ),
      )
    ],
  ),
)

edited Oct 08 '19 at 11:22

answered Oct 08 '19 at 11:16

imaN NeoFighT

480
4
13

This works in this situation so solves the problem, but frankly I have a bit more complex widget tree so maybe someone has more robust solution. Either way thanks for the clever hack. – Dominik Roszkowski Oct 08 '19 at 11:20
Dominik Roszkowski have you found a better solution? My widget tree is complex too. – Ilya Maximencko Oct 14 '20 at 10:45
This solution worked for me without any problem. thanks a lot. – Reza Esfandiari Apr 22 '23 at 21:40

CopsOnRoad · Answer 2 · 2019-10-08T11:28:21.757

You can handle the logic inside onHighlightChanged method;

Color _color;

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(),
    body: Center(
      child: Card(
        child: InkWell(
          splashColor: _color,
          highlightColor: _color,
          onTap: () {},
          child: Padding(
            padding: const EdgeInsets.all(28.0),
            child: RaisedButton(
              onHighlightChanged: (value) {
                if (value) {
                  setState(() => _color = Colors.white);
                } else {
                  Timer(Duration(milliseconds: 200), () {
                    setState(() => _color = null);
                  });
                }
              },
              child: Text('Test'),
              onPressed: () {},
            ),
          ),
        ),
      ),
    ),
  );
}

@Eugene Haha, it could be but someone already posted using Stack so I used different approach, check out the updated screenshot, problem solved at edges. — CopsOnRoad, Oct 08 '19 at 11:29

score 2 · Answer 3 · answered Oct 14 '20 at 11:17

2

try this out https://dartpad.dev/7ff7f5756d93db2d4ed6a4b9a6d75208. I used hack with wrapping in InkWell the widget you want to surround with parent InkWell

answered Oct 14 '20 at 11:17

Ilya Maximencko

411
2
15

How to prevent ripple effect on surrounding InkWell when tapped on InkWell inside

3 Answers3