Adding InkWell Splash Ripple Effect To Custom Widgets In Flutter

In this post we will learn how to add InkWell ripple splash effect on custom widgets in a Flutter application.

Introduction

InkWell is Flutter’s implementation of Material Design concept for touch response. It helps to create interactivity in your mobile application by adding gesture feedback.

For example you might want to give ripple effect when user taps on certain area of the app like a button or a container.

Flutter framework already provides splash effect functionality to many of it’s widgets like RaisedButton, FlatButton, ListTile etc. by default. However, if you want to use this feature to your custom widgets, you will have to explicitly make use of InkWell widget.

Checkout: Building An Expense Manager App In Flutter

Basic Setup

In this post we will create a custom Chip like container and add InkWell splash ripple effect on it. So, let’s begin with a basic setup of a Flutter Material App.

Create A Chip Like Container

//MyChip.dart

import 'package:flutter/material.dart';

main() => runApp(MaterialApp(home: MyChip()));

class MyChip extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Container(
          width: MediaQuery.of(context).size.width,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Container(
                  margin: EdgeInsets.all(12),
                  height: 50.0,
                  width: 100.0,
                  decoration: BoxDecoration(color: Colors.blue, boxShadow: [
                    BoxShadow(
                        color: Colors.grey, blurRadius: 4, offset: Offset(0, 2))
                  ]),
                  child: Center(
                    child: Text("My Chip",
                        style: Theme.of(context).textTheme.body1),
                  ))
            ],
          )),
    );
  }
}

So, far we have a container placed in the center of screen. Also, notice that we have set the color for container to be blue.

If you currently tap on this container, we will not see any splash effects. So, now we will turn this container into a InkWell widget.

Adding InkWell To Add Touch Effect

...
Container(
	margin: EdgeInsets.all(12),
	height: 50.0,
	width: 100.0,
	decoration: BoxDecoration(color: Colors.blue, boxShadow: [
	  BoxShadow(
		  color: Colors.grey, blurRadius: 4, offset: Offset(0, 2))
	]),
	  child: InkWell(
		child: Center(
			child: Text("My Chip",
				style: Theme.of(context).textTheme.body1)),
		onTap: () {},
	  ),
  )
...

We wrapped the Center and Text widgets by an InkWell widget. But if you run the app now, you would still not be able to see splash ripple effect.

This is because an InkWell widget must always have a Material widget as it’s parent widget.

Wrap InkWell By Material To Show Ripple Effect

child: Material(
  child: InkWell(
	child: Center(
		child: Text("My Chip",
			style: Theme.of(context).textTheme.body1)),
	onTap: () {},
  ),
),

After creating a top level Material widget, now if you run the app again, you can see that there is a splash effect.

Great, we got a working inkwell splash effect in our Flutter app! But what happened to it’s color? The container color turned into white.

Setting Color Of InkWell Container

Any child widgets placed inside the Material widget, takes the color set in the Material widget. So, we should set the color from Material’s color property itself. You can not set it from any the parent Container widget.

Another important thing to note when creating InkWell with Material parent widget is that you should set the color from the Material’s property itself. You can not set it from the Container.

So finally, our code that fixes the InkWell effect and the container color looks like this:

Container(
	margin: EdgeInsets.all(12),
	height: 50.0,
	width: 100.0,
	decoration: BoxDecoration(boxShadow: [
	  BoxShadow(
		  color: Colors.grey, blurRadius: 4, offset: Offset(0, 2))
	]),
	child: Material(
	  color: Colors.blue,
	  child: InkWell(
		child: Center(
			child: Text("My Chip",
				style: Theme.of(context).textTheme.body1)),
		onTap: () {},
	  ),
	),
  )

Important Points To Note Before Adding InkWell Widget

• An InkWell widget must always have a Material widget as it’s parent.
• It will only work when you have implemented at least one of its click event handler like the onTap event handler.
• To set the widget color, it should be done via the color property of the containing Material widget.

Learn More: How To Disable Multi Touch InkWell On A List Of Items

Conclusion

In this post we looked at how to use Flutter’s InkWell widget to add splash ripple effect. We also learnt that Material widget must be used as a parent and also the properties like color and shapes should be defined from the Material widget itself.