Flutter InkWell not showing a ripple effect

The Flutter InkWell widget is commonly used to create clickable widgets that show a ripple effect when you tap on them. However, there are times when this ripple effect does not show, which can be confusing. In this post, we will discuss a situation where the ripple effect is missing and go over three solutions to fix it.

Producing the problem

In the following main.dart file we have an InkWell widget that we expect to display a ripple effect:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Inkwell No Ripple Effect Demo',
      home: ClickableContainer(),
    );
  }
}

class ClickableContainer extends StatelessWidget {
  const ClickableContainer({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Inkwell No Ripple Effect Demo'),
      ),
      body: Center(
        child: InkWell(
          onTap: () => ScaffoldMessenger.of(context).showSnackBar(
            SnackBar(
              content: Text(
                'I do not show the ripple effect',
                textAlign: TextAlign.center,
              ),
              backgroundColor: Colors.red,
            ),
          ),
          child: Container(
            height: 200,
            width: 200,
            color: Colors.green,
          ),
        ),
      ),
    );
  }
}

In this code snippet, we created a clickable Container widget that shows a SnackBar message when clicked, by wrapping it with an InkWell widget. However, as you will see in the following GIF, it will not show the ripple effect:

The reason we cannot see the ripple effect is that the color of the Container widget is obstructing the ripple effect.

1. Removing the color

The simplest solution is to remove the color of our Container widget, see the code below:

child: InkWell(
  onTap: () => ScaffoldMessenger.of(context).showSnackBar(
    SnackBar(
      content: Text(
        'I do show the ripple effect',
        textAlign: TextAlign.center,
      ),
      backgroundColor: Colors.red,
    ),
  ),
  child: Container(
    height: 200,
    width: 200,
  ),
),

In the above code snippet, we removed the color property of the Container widget. For demonstration purposes I also changed the backgroundColor of our SnackBar message, see the GIF below for the result:

Now we can see the ripple effect, but this solution is not perfect because we no longer have a colored Container widget. Let us go through the other two possible solutions.

2. Using the Ink widget

The second approach we could take is to replace our Container widget with the Ink widget, see the code below:

child: InkWell(
  onTap: () => ScaffoldMessenger.of(context).showSnackBar(
    SnackBar(
      content: Text(
        'I do show the ripple effect',
        textAlign: TextAlign.center,
      ),
      backgroundColor: Colors.green,
    ),
  ),
  child: Ink(
    height: 200,
    width: 200,
    color: Colors.green,
  ),
),

In this code snippet, all we did is replacing the Container widget with the Ink widget. The Ink widget has slightly less options than the Container widget. However, if it is still sufficient enough for your use case, then it is a good solution:

3. Wrap the InkWell widget

In order to keep using the Container widget we can wrap our InkWell widget inside a Material widget, see the code below:

child: Material(
  color: Colors.green,
  child: InkWell(
    onTap: () => ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        content: Text(
          'I do show the ripple effect with a Container',
          textAlign: TextAlign.center,
        ),
        backgroundColor: Colors.green,
      ),
    ),
    child: Container(
      height: 200,
      width: 200,
    ),
  ),
),

In this code snippet, we are wrapping our InkWell widget with the Material widget. Instead of setting the color property inside the Container widget, we set the color property on the Material widget. This will have the same result as the previous solution. However, we are still using the Container widget.

Conclusion

The InkWell widget is very convenient for creating clickable widgets in Flutter. It is important for the widget to display a visual effect to enhance the user experience. By following the solutions provided in this post, you now have the knowledge to ensure the ripple effect is visible and make the most out of the InkWell widget.

Tags

• Flutter
• Dart