Change Floating Action Button Color in Flutter | Ultimate Guide

The FloatingActionButton widget in Flutter is one of the most used widgets. It is used to promote the primary action on a page. After adding the default Floating Action Button, sometimes you might need to change its colors such as icon color, background color, border color, and the color of the shadow. So in this tutorial, we’ll see how to change floating action button color in Flutter.

Here’s how it looks after changing color:

Here’s what we’ll cover:

• Steps to change floating action button background color in Flutter
• How to change floating action button icon color
• Changing floating action button border color
• Change floating action button shadow color
• How to change floating action button hover color
• Changing floating action button splash color
• Changing floating action button color globally (Bonus ⭐️)

Steps to change floating action button background color in Flutter

To change floating action button background color in Flutter, add a backgroundColor property to the FloatingActionButton widget. Inside the color property, assign the color of your choice.

Here is the step by step instructions:

1. Locate the file where you have placed the FloatingActionButton widget.

2. Inside the FloatingActionButton widget, add the backgroundColor parameter and assign the color of your choice.

3. Run the app.

Code Example

floatingActionButton: FloatingActionButton(
  onPressed: () {},
  child: Icon(Icons.add),
  backgroundColor: Colors.tealAccent, //<-- SEE HERE
),

Output

How to change floating action button icon color

To change floating action button icon color, you can add a foregroundColor property and add the required color. Note: Changing the foregroundColor will change the color of icon as well as the Text widget.

Code Example

floatingActionButton: FloatingActionButton(
  onPressed: () {},
  child: Icon(Icons.add),
  backgroundColor: Colors.tealAccent,
  foregroundColor: Colors.black, //<-- SEE HERE
),

Output

Changing floating action button border color

There is no straightforward way to change the floating action button border color. So the idea is to NOT use the floating action button widget at all and use the combination of Material and InkWell widget. You create the FloatingActionButton looking like a widget and then change the border color.

Code Example

floatingActionButton: Container(
  height: 70,
  width: 70,
  child: Material(
    type: MaterialType
        .transparency,
    child: Ink(
      decoration: BoxDecoration(
        border: Border.all(color: Colors.green, width: 3.0),
        color: Colors.greenAccent,
        shape: BoxShape.circle,
      ),
      child: InkWell(
       
        borderRadius: BorderRadius.circular(
            500.0), 
        onTap: () {},
        child: Icon(
          Icons.add,
          //size: 50,
        ),
      ),
    ),
  ),
),

Output

Change floating action button shadow color

To change the shadow color of the floating action button, you can add the Container widget as a child widget and create a box decoration using the BoxShadow widget. While doing this make sure you set the elevation property to 0.

Code Example

floatingActionButton: FloatingActionButton(
  onPressed: () {},
  elevation: 0,
  child: Container(
    height: 70,
    width: 70,
    decoration: BoxDecoration(
      color: Colors.transparent,
      borderRadius: BorderRadius.all(Radius.circular(50)),
      boxShadow: [
        BoxShadow(
          color: Colors.redAccent.withOpacity(0.2),
          spreadRadius: 3,
          blurRadius: 3,
          offset: Offset(0, 3),
        ),
      ],
    ),
    child: Icon(Icons.add),
  ),
  backgroundColor: Colors.tealAccent,
  foregroundColor: Colors.black,
),

Output

How to change floating action button hover color

To change the floating action button hover color, you can add a hoverColor property to the FloatingActionButton widget and assign the color of your choice.

Code Example

floatingActionButton: FloatingActionButton(
  onPressed: () {},
  elevation: 0,
  child: Icon(Icons.add),
  hoverColor: Colors.redAccent, //<-- SEE HERE
),

Output

Changing floating action button splash color

To change the floating action button splash color, you can add a splashColor property to the FloatingActionButton widget and assign the color of your choice.

Code Example

floatingActionButton: FloatingActionButton(
  onPressed: () {},
  elevation: 0,
  child: Icon(Icons.add),
  splashColor: Colors.amberAccent, //<-- SEE HERE
),

Output

Changing floating action button color globally

In the previous section, we saw how to change the floating action button color at the page level. but sometimes you might be looking to have a common style across all the pages of your app. In that case, you might want to change the floating action button color at the app level.

Here’s how you do it:

Step 1: Locate the MaterialApp widget.

Step 2: Inside the MaterialApp, add the theme parameter with ThemeData class assigned.

Step 3: Inside the ThemeData add the floatingActionButtonTheme parameter and then assign the FloatingActionButtonThemeData.

Step 4: Inside the FloatingActionButtonThemeData add the color paramters such as backgroundColor, foregroundColor, hoverColor, splashColor.

Step 5: Inside the color paramter set the color of your choice.

Code Example

MaterialApp(
  title: 'Flutter Demo',
  theme: ThemeData(
    primarySwatch: Colors.blue,
    floatingActionButtonTheme: FloatingActionButtonThemeData(
        backgroundColor: Colors.amberAccent,
        foregroundColor: Colors.greenAccent,
        hoverColor: Colors.redAccent,
        splashColor: Colors.tealAccent,
   ),
  ),
  home: ChangeFloatingActionButtonColorDemo(),
);

Conclusion

In this tutorial, we learned how to change floating action button color in Flutter with practical examples, we first saw how to change the color for the background, icon color, shadow color, border color and later explored how to change the hover color and splash cover. We also went through the code to change the color at the app level.

Would you like to check other interesting Flutter tutorials?