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 that 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 that 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.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  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.

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

It is picking the hoverColor property.

You might also like:

• How to get user input text from a TextField in Flutter
• How to customize the textfield cursor in Flutter
• Flutter TextField how to change the maximum and minimum lines
• How to remove the debug banner in Flutter apps in development mode
• Changing the size of a floating action button in Flutter
• Flutter AppBar widget and its properties