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:
- 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?