Posted in Dart Firebase Flutter

Flutter – Add Animated Circular FAB Menu Easily

Flutter – Add Animated Circular FAB Menu Easily Posted on May 13, 2020Leave a comment
I'm Hari Prasad Chaudhary from Nepal, developer of the finest educational website/app "MeroSpark" and the finest eCommerce system "PasalaY". Here I share the code snippet which I learn during development.

Do you want to add animated Circular FAB (Floating Action Button) Menu on your app, but you don’t have much knowledge about animation in Flutter, then have a look below, you can add circular menu easily with very less code like below.

fab circular menufab circular menu open

To add this circular menu, you need to add fab_circular_menu flutter package in your pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  fab_circular_menu: ^1.0.0

Now set FabCircularMenu() on floatingActionButton attribute of Scaffold() like below:

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

class MyFabCircularMenu extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return _MyFabCircularMenu();
  }

}

class _MyFabCircularMenu extends State<MyFabCircularMenu>{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar:AppBar(title:Text("FAB Circular Menu")),
        //app bar

        floatingActionButton: FabCircularMenu(

          fabCloseColor: Colors.deepOrangeAccent, 
          //Color of FAB when menu is not open
          fabOpenColor: Colors.deepPurpleAccent,
          //color of FAB when menu is open

          fabOpenIcon: Icon(Icons.menu, color: Colors.white),
          //FAB icon when menu is not open
          fabCloseIcon: Icon(Icons.close, color: Colors.white),
          //FAB icon when menu is open

          ringColor: Colors.purple[300],
          //set ring color to Colors.transparent for transparent ring

          children: <Widget>[
            //here you can add menu buttons
            // You should add atleast two menu button 
            // otherwise it will show error.

            fabsinglemenu(Icons.home, (){
                //set action for this menu
                print("Home button is pressed");
            }),

            fabsinglemenu(Icons.person, (){
                //set action for this menu
                print("User button is pressed");
            }),

            fabsinglemenu(Icons.help, (){
                //set action for this menu
                print("Help button is pressed");
            }),

            fabsinglemenu(Icons.alarm, (){
                //set action for this menu
                print("Alarm button is pressed");
            }),
          ]
        ), //FAB circular Menu
        

        body:Container( 
           color:Colors.black12,
           height:MediaQuery.of(context).size.height,
           width:double.infinity,
           child: Container( 
               // your content here
           )
        ) //main content
    );
  }

  Widget fabsinglemenu(IconData icon, Function onPressFunction){
      return  SizedBox( 
        width:75, height:75,
        //height and width for menu button

        child: RaisedButton(
             color: Colors.white,
             child: Icon(icon, color: Colors.deepPurpleAccent, size: 40,), 
             onPressed: onPressFunction,
             shape: RoundedRectangleBorder(
                  borderRadius: new BorderRadius.circular(60.0),
                ),
            )
        );
  }

}

In this way, you can set Circular FAB Menu in your App.

I'm Hari Prasad Chaudhary from Nepal, developer of the finest educational website/app "MeroSpark" and the finest eCommerce system "PasalaY". Here I share the code snippet which I learn during development.

Leave a Reply

Your email address will not be published. Required fields are marked *