Ink ripple effect when using GestureDetector

Question

I need to use a GestureDetector because it can detect many more types of user interactions than InkWell, but unlike InkWell it doesn't provide any visual response when a user taps or long presses on it.

Is it possible to add a ripple effect for tap/long press while still handling user interactions in the GestureDetector?

Answer 1

Try the following code:

InkWell(
  onLongPress: () {
    // Do what you want to do
  },
  child: child,
),

Answer 2

Just use this plugin

touch_ripple_effect: ^2.2.4

Touch ripple effect

TouchRippleEffect(
                borderRadius: _helloRadius,
                rippleColor: Colors.white60,
                onTap: (){
                  print("Anand !");
                },
                child: Container(
                  width: 110, 
                  height: 50, 
                  alignment: Alignment.center, 
                  decoration: BoxDecoration(color: Colors.pink, borderRadius: _helloRadius),
                  child: IconButton(
                    iconSize: 24.0, 
                    icon: Icon(Icons.search,color: Colors.white, size: 36,), 
                    onPressed: null
                    ),)
              ),

Touch Feedback effect

TouchFeedback(
                onTap: (){
                  print(" I am Aditya");
                },
                rippleColor: Colors.blue[200],
                child: Container(
                  width: 120,
                  height: 40, 
                  alignment: Alignment.center,
                  decoration: BoxDecoration(color: Colors.yellow, borderRadius: BorderRadius.circular(5),), 
                  child: Text(
                    "Hit me !", 
                    style: TextStyle(fontSize: 20, fontWeight:  FontWeight.bold)
                    )
                    ),
              )

Answer 3

if you want a quick hack, check this:

class Test extends StatelessWidget {
 const Test({
  Key? key,
  this.onTap,
 }) : super(key: key);
 final void Function()? onTap;
@override
Widget build(BuildContext context) {
final width = MediaQuery.of(context).size.width;
return Scaffold(
  body: GestureDetector(
    onTap: onTap,
    child: SizedBox(
      width: width * 0.2,
      height: 70,
      child: Card(
        color: Colors.red,
        child: InkWell(
          onTap: () {},
            ),
          ),
        ),
      ),
    );
  }
}