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

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:

Add Multiple Floating Action Buttons in Scaffold() widget:

Scaffold(
  floatingActionButton: Wrap( //will break to another line on overflow
    direction: Axis.horizontal, //use vertical to show  on vertical axis
    children: <Widget>[
          Container( 
            margin:EdgeInsets.all(10),
            child: FloatingActionButton(
              onPressed: (){
                  //action code for button 1
              },
              child: Icon(Icons.add),
            )
          ), //button first

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

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

          // Add more buttons here
    ],),
)

Full Dart Code:

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

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: "Test App",
        home: Scaffold(
        appBar: AppBar(title:Text("Multiple Floating Action Buttons")),
        floatingActionButton: Wrap( //will break to another line on overflow
                  direction: Axis.horizontal, //use vertical to show  on vertical axis
                  children: <Widget>[
                        Container( 
                          margin:EdgeInsets.all(10),
                          child: FloatingActionButton(
                            onPressed: (){
                                //action code for button 1
                            },
                            child: Icon(Icons.add),
                          )
                        ), //button first

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

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

                        // Add more buttons here
                ],
            ),
        body: Container( 
             child: Center(
               child: Text("Multiple Floating Buttons"),
             ),
        ),
      )
    );
  }
}

Output Screenshot:

You can add any number of floating action buttons on one screen. Copy the code above and modify it according to your project. For navigation bar integrations, explore notched floating action buttons in bottom app bars and customizing FloatingActionButton shapes and locations.