Flutter - Implement CrossFading Animation Between Two Screen

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:

Flutter - Implement CrossFading Animation Between Two Screen

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 Change Colors of a Floating Action Button in Android?

Android applications use the Floating Action Button for prompting the user to perform some important action within the android application. Floating Action Buttons in android applications are used to perform some important functionality within android applications. Many times in the android applicat

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

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

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

Floating Action Button in Android using Jetpack Compose

Floating Action Button is added to the android application to perform some important within the android application. These are implemented in the android application UI for some primary actions within the application. There are different types of floating action buttons such as simple, square, and e