Change Floating Button Color in Flutter

floating button change background color

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:

floating button background color
Floating Button Background Color

You can read more about floating button in flutter: Read More

floating button change background color
Previous Post

No more post

You May Also Like

Leave a Reply

Your email address will not be published. Required fields are marked *

nineteen − 15 =