Flutter tutorials and courses by Andrea Bizzotto

How to disable the default Widget splash effect in Flutter

By default, many Flutter Material Design widgets show splash effects when selected.

This applies to IconButton, InkWell, ListTile and many other widgets.

If you're creating a completely custom design and want to disable this app-wide, all you need to do is this:

MaterialApp( theme: ThemeData( splashColor: Colors.transparent, highlightColor: Colors.transparent, hoverColor: Colors.transparent, ), )

Alternatively, you can apply this to a certain widget sub-tree by inserting a parent Theme widget:

Theme( data: Theme.of(context).copyWith( splashColor: Colors.transparent, highlightColor: Colors.transparent, hoverColor: Colors.transparent, ) child: child, )

You can also disable this directly for specific widgets:

IconButton( splashColor: Colors.transparent, highlightColor: Colors.transparent, hoverColor: Colors.transparent, icon: someIcon, onPressed: someCallback, )

Easy-peasy, like it should be. 😎

Happy coding!

Want more?

Fast-track your Flutter learning with over 40 hours of in-depth content.