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