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
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; }); }, ), ], ), ), ), ); } } |