How to Change Floating Action Button Color in Flutter?

How to Implement Circular Animated Floating Action Button in Flutter?

Last Updated : 13 Sep, 2022

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 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: Add the Dependency in the pubspec.yaml File.

You can add the dependency from the bash or copy-paste the plugin.

flutter pub add fab_circular_menu

This will add something like this

pubspec.yaml

Don't forget to get the packages.

Note: when you are adding the dependency, version of plugin may changed.

Step 3: Import the Plugin into the main.dart file

import 'package:fab_circular_menu/fab_circular_menu.dart';

Now we have a row widget with a text widget as a child, that will show the counter value in the body.

Dart

body: Row(
    crossAxisAlignment: CrossAxisAlignment.center,
      children:[
          SizedBox(width: 25),
          Text(
              "$Counter",
              style: TextStyle(
                  fontSize: 60,
                  fontWeight: FontWeight.bold,
              ),
          ),
      ],
 ),

Step 4: Creating Floating Action Button

We have to create the floating action button, which has several properties to customize the FAB, as shown in the code. We have one property onDisplayChange, which we call the setState method, which sets the value. FAB has the children that are shown when Fab is open.

Code:

Dart

import 'package:flutter/material.dart';
import 'package:fab_circular_menu/fab_circular_menu.dart';

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

class CircularFAB extends StatefulWidget {
  const CircularFAB({Key? key}) : super(key: key);

  @override
  _CircularFABState createState() => _CircularFABState();
}

class _CircularFABState extends State<CircularFAB> {
  int Counter=0;
  String IsOpened="No";
  String BtnText ="OpenMenu";
  final GlobalKey<FabCircularMenuState> fabKey = GlobalKey();
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar:AppBar(
          title:Text("Circular Animated Floating ")
        ),
        body:Row(
            crossAxisAlignment:CrossAxisAlignment.center,
            children:[
              SizedBox(width:25),
              Text(
                "$Counter",
                style:TextStyle(
                  fontSize:60,
                  fontWeight:FontWeight.bold,
                ),
              ), 
            ],
          ),
        floatingActionButton: Builder(
          builder: (context) => FabCircularMenu(
            key: fabKey,
            alignment: Alignment.bottomRight,
            ringColor: Colors.teal,
            ringDiameter: 455.0,
            ringWidth: 80.0,
            fabSize: 50.0,
            fabElevation: 8.0,
            fabColor: Colors.green,
            fabOpenIcon: Icon(Icons.menu, color:Colors.white),
            fabCloseIcon: Icon(Icons.close, color:Colors.red),
            fabMargin: const EdgeInsets.all(20.0),
            animationDuration: const Duration(milliseconds: 800),
            animationCurve: Curves.easeInOutCirc,
            onDisplayChange: (isOpen) {
              if(isOpen){
                setState(() {
                  IsOpened="Yes";
                 
                });
              }
              else{
                setState(() {
                  IsOpened="No";
                  
                });
              }
            },
            children: [
              SizedBox(),
              SizedBox(),              
              FloatingActionButton(
                heroTag:"FAB_Plus_1",
                child:Icon(Icons.plus_one),
                onPressed:(){
                  setState(() {
                    Counter=Counter+1;
                  });
                },
              ),
              FloatingActionButton(
                heroTag:"FAB_Plus_2",
                child:Icon(Icons.exposure_plus_2),
                onPressed:(){
                  setState(() {
                    Counter=Counter+2;
                  });
                },
              ),
              FloatingActionButton(
                heroTag:"FAB_Minus_1",
                child:Icon(Icons.exposure_neg_1),
                onPressed:(){
                  setState(() {
                    Counter=Counter-1;
                  });
                },
              ),
              FloatingActionButton(
                heroTag:"FAB_Minus_2",
                child:Icon(Icons.exposure_neg_2),
                onPressed:(){
                  setState(() {
                    Counter=Counter-2;
                  });
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Output:

How to Change Floating Action Button Color in Flutter?

M

ms471841

Improve

Article Tags :

Similar Reads

How to Change Floating Action Button Color in Flutter?

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 the

How to Add Image on Floating Action Button in Android?

A floating action button (FAB) is a user interface element in the mobile application that is typically circular and floats above the main content. It usually has a prominent color and icon, and it is used to provide quick access to the most commonly used action within the app. Step-by-Step Implement

Flutter - Implement CrossFading Animation Between Two Screen

CrossFading Animation is an animation technique used to smoothly transition between two images or scenes. The primary concept is to fade out one image or scene while simultaneously fading in another, creating a seamless transition between them. Implementing a cross-fading animation between two scree

How to Implement Fab Explosion Animation in Android?

When interacting with apps on our devices, animations add delight to the user's experience and create a sense of connection between the vibrant destinations. One of the animations on Android which enhances the user's experience is the FAB (Floating Action Button) Explosion Animation. Here, the user

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

Theming Floating Action Buttons in Android with Example

Prerequisite: Floating Action Button (FAB) in Android with ExampleExtended Floating Action Button in Android with Example Android application developers want to seek the attention of the users by customizing and theming the android application widgets and keep more traffic of customers only by the d

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

Floating Action Button (FAB) in Android with Example

The floating action button is a bit different button from the ordinary buttons. Floating action buttons are implemented in the app's UI for primary actions (promoted actions) for the users and the actions under the floating action button are prioritized by the developer. For example the actions like

Android Floating Action Button in Kotlin

Floating action buttons are used in android applications to indicate the user for some priority-based task. Generally floating action buttons in the android applications are found aligned to the bottom end of the application. In this article, we will take a look at How to implement the Floating Acti

Counter Floating Action Button in Android with Example

Counter Floating Action button is seen in most of the E-commerce apps where we are using the functionality to display the number of items that are present in the user's shopping cart. In this article, we will take a look at implementing this counter floating action button in our Android app in Andro