Posted in Flutter

Flutter – How to Add Multiple Floating Action Buttons in One Screen

Flutter – How to Add Multiple Floating Action Buttons in One Screen Posted on May 12, 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.

The attribute'floatingActionButton' of Scaffold() widget allows you to add only one floating action button, but if you do a simple trick, you can achieve a single screen with multiple floating action buttons like below:

multiple floating actions button

Use Stack() and Positioned() widget to add multiple floating action buttons. View for the code below for more insight.

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

class MultipleFloatingButton extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title:Text("Multiple Floating Action Buttons")),
        floatingActionButton: ,
        body: Container( 
             height: MediaQuery.of(context).size.height,
             width: MediaQuery.of(context).size.width,
             //making outermost wrapper equal to
             //100% width and vertical height

             child:Stack(
                 children: <Widget>[
                      SingleChildScrollView(
                         child: Container( 
                            //Your content here 
                         ), 
                      ), // main content wrapper

                       Positioned( 
                        left:20, right:20, bottom:20,
                        //position to button:20

                        child:Container( 
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.end,
                              //align buttoms to the right
                              children: <Widget>[

                                   Container( 
                                      margin:EdgeInsets.only(right:10),
                                      child: FloatingActionButton(
                                        onPressed: (){
                                            //action code for button 1
                                        },
                                        child: Icon(Icons.add),
                                      )
                                   ), //button first

                                   Container( 
                                      margin:EdgeInsets.only(right:10),
                                      child: FloatingActionButton(
                                        onPressed: (){
                                            //action code for button 2
                                        },
                                        backgroundColor: Colors.deepPurpleAccent,
                                        child: Icon(Icons.add),
                                      )
                                   ), // button second

                                    Container(
                                      child: FloatingActionButton(
                                        onPressed: (){
                                            //action code for button 3
                                        },
                                        backgroundColor: Colors.deepOrangeAccent,
                                        child: Icon(Icons.add),
                                      )
                                   ), // button third

                                   // Add more buttons here
                            ],),
                        )
                      ), // our floating action button wrapper
                 ],
             )
        ),
    );
  }

}

You can add any numbers of floating action buttons on one screen. Copy the code above and modify it according to your project.

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 *