Flutter - Add Multiple Floating Action Buttons

This tutorial shows you how to add two or more floating action buttons in Flutter.

You may already know that Flutter has a widget called FloatingActionButton, also known as FAB. Usually, there is only one FAB displayed on the screen. If you need to add more than one FAB, you can read the examples below.

Add Multiple Floating Action Buttons

A Flutter page typically has a Scaffold widget, which has an argument named floatingActionButton. If you need to have more than one floating action button, the idea is to wrap the buttons by using a widget that can have multiple children. For example, you can use a Row or a Column widget. In addition, you may need to adjust the value of the floatingActionButtonLocation argument.

The examples below show how to add multiple FABs horizontally. For this case, use a Row widget and pass the buttons as the children. You can also set the mainAxisAlignment of the Row widget to align the buttons. A Padding widget can be used as well to avoid the buttons touching the edge of the screen.

In the first example, there are two buttons, one at the start of the row and the other one at the end of the row.

  Scaffold(
    floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    floatingActionButton: Padding(
      padding: const EdgeInsets.all(10.0),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          FloatingActionButton(
            onPressed: () {},
            backgroundColor: Colors.teal,
            child: const Icon(Icons.remove),
          ),
          FloatingActionButton(
            onPressed: () {},
            backgroundColor: Colors.teal,
            child: const Icon(Icons.add),
          ),
        ],
      ),
    ),
    // other arguments
  ),

Output:

Below is another example where the buttons are aligned at the end of the row.

  Scaffold(
    floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,
    floatingActionButton: Padding(
      padding: const EdgeInsets.only(bottom: 10),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          FloatingActionButton(
            backgroundColor: Colors.teal,
            onPressed: () {},
            child: const Icon(Icons.remove),
          ),
          const SizedBox(width: 20),
          FloatingActionButton(
            backgroundColor: Colors.teal,
            onPressed: () {},
            child: const Icon(Icons.add),
          ),
        ],
      ),
    ),
    // other arguments
  ),

Output:

If you want to have multiple FABs vertically, use a Column widget instead.

  Scaffold(
    floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
    floatingActionButton: Padding(
      padding: const EdgeInsets.all(10.0),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          FloatingActionButton(
            onPressed: () {},
            backgroundColor: Colors.teal,
            child: const Icon(Icons.remove),
          ),
          const SizedBox(height: 10),
          FloatingActionButton(
            onPressed: () {},
            backgroundColor: Colors.teal,
            child: const Icon(Icons.add),
          ),
        ],
      ),
    ),
    // other arguments
  ),

Output:

Summary

To add multiple floating action buttons, you can also use the floatingActionButton argument. You need to have a widget that can have multiple children such as a Row or a Column and set the FloatingActionButton widgets as the children. The Row or Column widget can be useful to set the alignment of the buttons as well. In addition, Scaffold's floatingActionButtonLocation argument can be used to set the location of the buttons.