How to Change Floating Action Button Color in Flutter? Last Updated : 28 Apr, 2025 Comments Improve Suggest changes Like Article Like Report Every Android application has the floatingActionButton in it. There is a possibility that there are multiple screens in the application and have floatingActionButton on that screens, then we need to give the colors property to every floatingActionButton. But Flutter resolves this by changing the themeData class in the materialApp widget. Now we can set the properties globally of the floatingActionButton and these changes are reflected in every FloatingActionButton in the Flutter application. A sample video is given below to get an idea about what we are going to do in this article. Step By Step Implementation Step 1: Create a New Project in Android Studio To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter. Step 2: Locate the MaterialApp widget Dart class runMyApp extends StatefulWidget { const runMyApp({super.key}); @override State<runMyApp> createState() => _runMyAppState(); } class _runMyAppState extends State<runMyApp> { @override Widget build(BuildContext context) { return MaterialApp( useMaterial3: true, ), title: 'FAB', ); } } Step 3: Inside that, Locate the themeData class. Dart Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, theme: ThemeData(), // themeData useMaterial3: true, ), title: 'FAB', ); } } Step 4: Inside that, Add the floatingActionButtonTheme parameter and then assign FloatingActionButtonThemeData.  And then add the properties of the color. Dart Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, theme: ThemeData( primarySwatch: Colors.green, floatingActionButtonTheme: const FloatingActionButtonThemeData( backgroundColor: Colors.green, foregroundColor: Colors.black, hoverColor: Colors.red, splashColor: Colors.white, ), useMaterial3: true, ), title: 'FAB', ); } } Code Example: Dart import 'package:flutter/material.dart'; void main() { // runApp method that // calls the runMyApp class runApp(const runMyApp()); } class runMyApp extends StatefulWidget { const runMyApp({super.key}); @override State<runMyApp> createState() => _runMyAppState(); } class _runMyAppState extends State<runMyApp> { @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, theme: ThemeData( primarySwatch: Colors.green, floatingActionButtonTheme: const FloatingActionButtonThemeData( backgroundColor: Colors.green, foregroundColor: Colors.black, hoverColor: Colors.red, splashColor: Colors.white, ), useMaterial3: true, ), title: 'FAB', home: Scaffold( appBar: AppBar( title: Text('Floating Action Button'), ), floatingActionButton: FloatingActionButton( child: Icon(Icons.menu), onPressed: (() {}), ), ), ); } } Output: Comment More infoAdvertise with us Next Article How to Change Floating Action Button Color in Flutter? M ms471841 Follow Improve Article Tags : Technical Scripter Dart Flutter Technical Scripter 2022 Similar Reads How to Implement Circular Animated Floating Action Button in Flutter? The Floating Action Button is the circular button that floats on the bottom of the  Application screen, It may perform many tasks like showing the menu bar, capturing images, opening the gallery anything you want. In this article, we are creating the Circular Animated Floating Action Button. Step By 3 min read Flutter - Draggable Floating Action Button In Flutter, Floating Action Buttons are considered modern UI Widgets, in most applications the position of the FAB is fixed but In this article, we are going to explore how can we make a Draggable Floating Action Button and change its position with the help of a Draggable widget in Flutter. A sample 4 min read Flutter - Extended Floating Action Button In Flutter, the Floating Action Button (FAB) is a common UI Widget. There are scenarios where you might need to extend the functionality of the FAB to offer additional options or actions. In this article we are going to create a Floating Action Button by clicking it will show 2 more options we can a 4 min read How to Change the Color of the Status Bar in Flutter Application? Flutter is an open-source UI toolkit developed and maintained by Google. It is used by big companies like Airbnb, Alibaba, and Google itself to serve billions of users around the globe. Status Bar is the topmost area of the screen which is home to the Battery Indicator, Network Status, Time, Notific 1 min read How to Disable a Button in Flutter? Sometimes we need to make the button disabled, let us consider, you created a form to take the user input and a form submit button. Then you want that, the button must be disabled until the user fills all the fields of the form then immediately enable the button. Sample Output is given below what we 3 min read React MUI Floating Action Button React MUI is a UI library that provides fully-loaded components, bringing our own design system to our production-ready components. MUI is a user interface library that provides predefined and customizable React components for faster and easy web development, these Material-UI components are based o 4 min read How to Change Screen Orientation in Flutter on Click of a Button? Flutter is an open-source UI toolkit developed and maintained by Google. It is used by big companies like Airbnb, Alibaba, and Google itself to serve billions of users around the globe. While developing the UX of an application, there are many situations where you want the device to be in a specific 2 min read How to Create Buttons with Rounded Corners in Flutter? Flutter is a UI toolkit developed by Google. It is being utilized by big tech companies like Alibaba, Airbnb, and Google itself to build apps that serve billions of users around the globe. In this article, we will be seeing how to make Rounded Buttons in Flutter. Approach: We will create the buttons 2 min read Creating a Calculator using Calculator Widget in Flutter If you need a Calculator in Flutter or need to do a small calculation in your flutter application, Writing your own code going to be tough, but Flutter gives you a SimpleCalculator Widget, Which allows you to create a Beautiful simple calculator. Only you need to set up the package in pubspec.yaml f 3 min read Floating Action Button using Fab Option Library in Android Floating Action Button using Fab Options is another unique way of displaying various options. With the help of this, we can Navigate to different screens easily. This Floating Action button display various menu with Animation. So it increases user experience. In this article, we are going to learn h 3 min read Like