How to get ripple effect in Gesture Detector

Question

I want to use the function LongPressDown which also gives LongPressDownDetails of GestureDetector but sadly, Gesture Detector comes without the ripple touch effect. So if I choose to use InkWell it doesn't have the LongPressDownDetails.

So my question is, how can I get the ripple effect of InkWell with the features of GestureDetector?

score 5 · Accepted Answer · answered Dec 05 '22 at 05:06

5

It's pretty straightforward, just add an Inkwell over the GestureDetector and you'll be good to go (no need to write anything in the onTap).

return InkWell(
      onTap: () {},
      child: GestureDetector(
        onLongPress: (){
          ScaffoldMessenger.of(context).showSnackBar(const SnackBar(
          content: Text('Tap'),
        ));
        }
        ,
        child: const Padding(
          padding: EdgeInsets.all(12.0),
          child: Text('Flat Button'),
        ),
      ),
    );

answered Dec 05 '22 at 05:06

Risheek Mittal

1,077
2
18

It doesn't really work that well, the ripple effect won't show if use gesture detectors, onlong press and ontap – Ρπίηζε Κιηφφ Dec 05 '22 at 05:36
It is working for me though what is the code that you are using with this – Risheek Mittal Dec 05 '22 at 05:39
I use onTap to navigate to another screen and onLongPressStart to show popup menu, but the thing is, it doesn't show the ripple effect, if i remove the gesture detector then it does show – Ρπίηζε Κιηφφ Dec 05 '22 at 05:42
I am really really sorry. I am such a fool. I forgot to add on tap inside the InkWell. Sorry to bother you and thank you so much for your answer. – Ρπίηζε Κιηφφ Dec 05 '22 at 05:45
No problems :) Is it working fine now? And please share some code next time so that we can also replicate the issue at our end. – Risheek Mittal Dec 05 '22 at 05:46
Yes it is working now and I promise to include the code next time. – Ρπίηζε Κιηφφ Dec 05 '22 at 05:48

How to get ripple effect in Gesture Detector

1 Answers1