Floating action button: how to change the splash color and highlight color like in a RaisedButton?

Question

I see that the splash and highlight colors that the FAB takes are connected to argument color in the MaterialApp widget. is there a way to override those colors? I found only foreground color and background colors and those are not what I want. Thanks

Solution 1

If you check the source code of FloatingActionButton the splash color is tied to the Theme of the app, so you can change the theme only for the button, like this:

Theme(
  data: Theme.of(context).copyWith(highlightColor: Colors.yellow),
  child: FloatingActionButton(
    backgroundColor: Colors.red,
    onPressed: () {},
    child: Text("hello world"),
 ),
)

Solution 2

While the current answer works for setting the highlight color of a single FloatingActionButton, you could also define the splash color and highlight color globally. The splash color can be defined directly for the FloatingActionButton, though, the highlight color comes from your theme.

final theme = ThemeData(
  highlightColor: Colors.white.withOpacity(0.25),
  ...,
  floatingActionButtonTheme: FloatingActionButtonThemeData(
    splashColor: Colors.white.withOpacity(0.25),
    ...,
  ),
);

Then, simply add your theme to your MaterialApp like this

  MaterialApp(
    theme: theme,
    ...,
  )

Comments

[diegoveloper]

I think you could create a Stateless widget with that theme.

[Floris Marpepa]

Wow thank you. That is great. Didn't even think I could make another Theme Widget only for the button. Thank you.