InkWell not showing ripple effect

Question

Tapping the container triggers the onTap() handler but does not show any ink splash effect.

class _MyHomePageState extends State

        

Answer 1

This is the best way I found and use it always. You can try it.

• Wrap your Widget with InkWell
• Wrap InkWell with Material

• Set the opacity 0% anyhow. e.g.: color: Colors.white.withOpacity(0.0),

  Material(
    color: Colors.white.withOpacity(0.0),
    child: InkWell(
      child: Container(width: 100, height: 100),
      onTap: (){print("Wow! Ripple");},
    ),
  )
  

Answer 2

A better way is to use the Ink widget instead of any other widget.

Instead of defining color inside container you can define it in Ink widget itself.

Below code will work.

Ink(
  color: Colors.orange,
  child: InkWell(
    child: Container(
      width: 100,
      height: 100,
    ),
    onTap: () {},
  ),
)

Do not forget to add a onTap: () {} in the InkWell else it will not show the ripple effect too.

Answer 3

InkWell() will never show the ripple effect until you add the

onTap : () {} 

or any of the callbacks like onDoubleTap, onLongPress etc.

parameter inside the InkWell as it starts listening to your taps only when you specify this parameter.

Answer 4

I was hit by a similar problem adding an Inkwell to an existing complex Widget with a Container wrapping a BoxDecoration with a color. By adding the Material and Inkwell in the way suggested the Inkwell was still obscured by the BoxDecoration so I just made the BoxDecoration's color slightly opaque which allowed the Inkwell to be seen

Answer 5

After you added onTap:(){} listener, ripple effect should work fine. It doesn't work if you use BoxShadow() with in the InkWell() widget.

Answer 6

Output:

---

Simply use Ink widget wrapped in an InkWell.

InkWell(
  onTap: () {}, // needed
  child: Ink( // use Ink
    width: 200,
    height: 200,
    color: Colors.blue,
  ),
)