Ripple effect not working on InkWell? try the Ink widget! or work with Container!

In flutter there is 2 very common way to make any widget tappable:

1. GestureDetector: without any effect
2. InkWell: With the material’s ripple effect

As the InkWell widget offers a ripple effect when tap out of the box, it is very lucrative to use the InkWell widget.

But the problem is the ripple effect for which we often want to use the InkWell widget, which most of the time doesn’t work.

Let’s take a code,

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.light().copyWith(),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Container(
          padding: const EdgeInsets.symmetric(vertical: 48),
          alignment: Alignment.topCenter,
          child: InkWell(
            onTap: () {},
            child: Container(
              padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
              decoration: const BoxDecoration(color: Colors.red),
              child: Text(
                'My Button',
                style: Theme.of(context).textTheme.titleLarge?.copyWith(color: Colors.white),
              ),
            ),
          ),
        ),
        appBar: AppBar(
          title: const Text('InkWell works!'),
        ),
      ),
    );
  }
}

Here I have taken a Container widget with some decoration, colored the container in red color, and wrapped that container with InkWell, but here the ripple effect will not work.

Actually, the ripple effect is working but hides behind the container.

So that's where the Ink widget comes in. It has a decoration property the same as Container. So it paints the given decoration on top of the child widget.

What do we need to do?

We just need to wrap the Container widget, with the Ink widget, and move the decoration from the Container to the Ink widget.

Below I have given Before & After code snippet:

Before,

InkWell(
    onTap: () {},
    child: Container(
      decoration: const BoxDecoration(color: Colors.red),
      padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
      child: Text(
        'My Button',
        style: Theme.of(context).textTheme.titleLarge?.copyWith(color: Colors.white),
      ),
    ),
  )

After,

InkWell(
  onTap: () {},
  child: Ink(
    decoration: const BoxDecoration(color: Colors.red),
    child: Container(
      padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
      child: Text(
        'My Button',
        style: Theme.of(context).textTheme.titleLarge?.copyWith(color: Colors.white),
      ),
    ),
  ),
),

That is it. Now it will work as expected. Inside decoration, you can place anything,

Final sample output

The Ink widget works with an Image as well

There is a separate constructor of the Ink class for that

Ink.image()

You can put a gradient also in the decoration.

Bonus: For those who love to use Container only

For that,

We need to wrap the Inkwell widget with the Material widget, which will help us with the ripple effect, and wrap that Material with Container, put any decoration in that Container, but all the decoration will be hidden behind the Material widget’s design until you give it a color transparent.

It’s a 3-step process,

Step 1. Put any widget Inside “Inkwell” without any decoration/design

Step 2. Wrap the “Inkwell” widget with the “Material” widget with “color: Colors.transparent”

Step 3. Wrap the “Material” widget with the “Container” widget and give it any decoration

The code can be written in the following way,

Container(
    decoration: const BoxDecoration(color: Colors.red),
    child: Material(
      color: Colors.transparent,
      child: InkWell(
        onTap: () {},
        child: Container(
          padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
          child: Text(
            'My Button',
            style: Theme.of(context).textTheme.titleLarge?.copyWith(color: Colors.white),
          ),
        ),
      ),
    ),
  )

You can put gradient also in the decoration

Sample Code for gradient button

Container(
    decoration: const BoxDecoration(
      gradient: LinearGradient(
        colors: [Colors.red, Colors.blue],
      ),
    ),
    child: Material(
      color: Colors.transparent,
      child: InkWell(
        onTap: () {},
        child: Container(
          padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
          child: Text(
            'My Button',
            style: Theme.of(context).textTheme.titleLarge?.copyWith(color: Colors.white),
          ),
        ),
      ),
    ),
  )

Output: