Change Floating Button Color in Flutter

When you create an app, you probably have a color palitra for your app design. Flutter, by default, has a blue color for all Floating Buttons and AppBar. In this short article, I will show you how to change the default color for all Floating Buttons.

1. Change All Floating Button’s Color

Assuming we want to change the background color to black. To achieve our goal, we simply need to add the floatingActionButtonTheme and its parameters to our MaterialApp() class inside ThemeData(). FloatingActionButtonThemeData().

You can see the code below:

floatingActionButtonTheme: FloatingActionButtonThemeData(
  backgroundColor: Colors.black,
),

Final MyApp class should look like this:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        floatingActionButtonTheme: FloatingActionButtonThemeData(
          backgroundColor: Colors.black,
        ),
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

This is our result: