How to change the colors of a Floating action button in Flutter

FloatingActionButton color changes in flutter:

In Flutter, we have the FloatingActionButton class that we can use to create a material design floating action button. To change the colors it provides a couple of properties, those can be used to change the colors of the floating action button.

In this post, I will list down the properties of different colors those can be used in the floating action button with an example.

Properties to change the colors of a floating action button:

Following are the main properties defined in FloatingActionButton widget those can be used to modify different colors of a floating action button in flutter:

  1. backgroundColor → Color: This is a Color property that is used to change the background color of the floating action button. If it is null, FloatingActionButtonThemeData.backgroundColor of ThemeData.floatingActionButtonTheme is selected if available. Else, it selects ColorScheme.secondary of the current theme.
  2. focusColor → Color: This is a Color property to use to fill the button when it has input focus. It reads from ThemeData.focusColor by default.
  3. foregroundColor → Color: This Color property is used as the foreground color to use for the icons and text in the floating action button. FloatingActionButtonThemeData.foregroundColor of ThemeData.floatingActionButtonTheme is used if it is null. If it is also not available, ColorScheme.onSecondary color of ThemeData.colorScheme is used.
  4. hoverColor → Color: It is the color to fill the button when it has a pointer hovering on it. It takes ThemeData.hoverColor by default.
  5. splashColor → Color: It is the splash color of the floating action button. If it is null, it picks from FloatingActionButtonThemeData.splashColor. If this is also null, it gets the value from ThemeData.splashColor.

Example program:

Now, let’s try with an exmaple. The below example creates a floating action button with these colors.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('AppBar Example'),
          backgroundColor: Colors.teal,
        ),
        body: Center(child: const Text('Example of AppBar')),
        floatingActionButton: FloatingActionButton(
          onPressed: () {},
          child: Icon(Icons.add),
          backgroundColor: Colors.red,
          focusColor: Colors.blue,
          foregroundColor: Colors.amber,
          hoverColor: Colors.green,
          splashColor: Colors.tealAccent,
        ));
  }
}

Here, we are using all colors, but in your phone, you might not see all values like hoverColor or focusColor. splashColor will appear once you tap on the button.

It looks as like below in an Android emulator.

flutter floating action button color

It looks as like the below screen, with the cursor hovering over the button:

flutter floating action button color web

It is picking the hoverColor property.

You might also like: