Flutter Quick Tip: Changing the Splash Color of ListTile

After seeing a ton of different answers about changing the splash color of different widgets, namely ListTile, here are two quick ways of doing it:

Be sure to check your specific widget, as some (such as RaisedButton and IconButton) already have splashColor and highlightColor properties you can set without having to modify or add a Theme.

Option 1: Set it in your app’s ThemeData

Caveat: This option will change ALL widgets using splashColor or highlightColor to the colors you set, so if that doesn’t work for you, go for Option 2.

1. In your main.dart file, add ThemeData to your MaterialApp ‘s theme property (if it isn’t already there).
2. Within ThemeData, add the splashColor and highlightColor properties.
3. The splashColor property is the color that spreads from the tap position. The highlightColor is the color that fills in the ListTile. Change these to your desired colors.

Changing the main theme changes everything

Option 2: Wrap your widget in a Theme widget

This will override the Theme set within MaterialApp and apply it only to its children. If you can’t change the properties of ThemeData in MaterialApp, this method will work better.

1. Wrap your widget of choice in a Theme widget.
2. The splashColor property is the color that spreads from the tap position. The highlightColor is the color that fills in the ListTile. Change these to your desired colors.

Two themes for two widgets

As you can see above, you can set a whole new theme without altering the main theme set within MaterialApp.

Final note: If your splash effect isn’t looking just right, try adding a level of opacity to the highlightColor:

highlightColor: Colors.blue.withOpacity(.3);

This will accentuate the splash effect better than an opaque color.

That is all — bye now.

Code: