Multiple FABs along the bottom of the screen

Question

I am looking to add multiple FABs along the bottom of a screen, evenly spaced.

I initially achieved this with the following:

      body: Center(
        child: Stack(
          children: <Widget>[
            Row(
              children: <Widget>[
                Padding(
                  padding:
                      const EdgeInsets.only(left: 12.0, right: 20.0, top: 580),
                  child: FloatingActionButton(
                    onPressed: () {},
                    child: const Icon(Icons.undo),
                    splashColor: Colors.pink[900],
                    backgroundColor: Colors.pink[250],
                  ),
                ),
                Padding(
                  padding:
                      const EdgeInsets.only(left: 0.0, right: 20.0, top: 580),
                  child: FloatingActionButton(
                    onPressed: () {},
                    child: const Icon(Icons.cancel),
                    splashColor: Colors.pink[900],
                    backgroundColor: Colors.pink[250],
                  ),
                ),
                Padding(
                  padding:
                      const EdgeInsets.only(left: 0.0, right: 20.0, top: 580),
                  child: FloatingActionButton(
                    onPressed: () {},
                    child: const Icon(Icons.favorite),
                    splashColor: Colors.pink[900],
                    backgroundColor: Colors.pink[250],
                  ),
                ),
                Padding(
                  padding:
                      const EdgeInsets.only(left: 0.0, right: 20.0, top: 580),
                  child: FloatingActionButton(
                    onPressed: () {},
                    child: const Icon(Icons.check_circle),
                    splashColor: Colors.pink[900],
                    backgroundColor: Colors.pink[250],
                  ),
                ),
                Padding(
                  padding:
                      const EdgeInsets.only(left: 0, right: 20.0, top: 580),
                  child: FloatingActionButton(
                    onPressed: () {},
                    child: const Icon(Icons.share),
                    splashColor: Colors.pink[900],
                    backgroundColor: Colors.pink[250],
                  ),
                ),
              ],
            ),

However, this felt really nasty, and while it looked good on my single test device, when moving to other devices it did not scale.

What is the correct way of doing this?

Answer 1

PLEASE NOTE:

1) A FloatingActionButton is always align to the bottom of the screen for you don't need to give it a top margin.

2) Instead of hardcoding the right and left paddings, you can use the row properties to arrange all widgets within a row: like :

mainAxisAlignment: MainAxisAlignment.center
mainAxisAlignment: MainAxisAlignment.spaceAround
mainAxisAlignment: MainAxisAlignment.spaceBetween
mainAxisAlignment: MainAxisAlignment.spaceEvenly

Replace the code below with your code: It works perfectly:

body: Stack(
          children: <Widget>[
              Row( 
               // makes it go to the bottom of the screen
               crossAxisAlignment: CrossAxisAlignment.end,
               // makes space all the floating actions buttons evenly
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  FloatingActionButton(
                    onPressed: () {},
                    child: const Icon(Icons.undo),
                    splashColor: Colors.pink[900],
                    backgroundColor: Colors.pink[250],
                  ),
                  FloatingActionButton(
                    onPressed: () {},
                    child: const Icon(Icons.cancel),
                    splashColor: Colors.pink[900],
                    backgroundColor: Colors.pink[250],
                  ),
                  FloatingActionButton(
                    onPressed: () {},
                    child: const Icon(Icons.favorite),
                    splashColor: Colors.pink[900],
                    backgroundColor: Colors.pink[250],
                  ),
                  FloatingActionButton(
                    onPressed: () {},
                    child: const Icon(Icons.check_circle),
                    splashColor: Colors.pink[900],
                    backgroundColor: Colors.pink[250],
                  ),
                  FloatingActionButton(
                    onPressed: () {},
                    child: const Icon(Icons.share),
                    splashColor: Colors.pink[900],
                    backgroundColor: Colors.pink[250],
                  ),
                ],
           ],
        ),

I hope this helps.

Answer 2

You hardcoded most of the paddings so it won't work with many screens. Try to let flutter do the positioning as much as possible :)

Here's what you want. It should work with any screen type for both portrait and landscape.

body: Stack(
          children: <Widget>[
            Container(
              alignment: Alignment.bottomCenter,
              padding: EdgeInsets.only(bottom: 20),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: <Widget>[
                  FloatingActionButton(
                    onPressed: () {},
                    child: const Icon(Icons.undo),
                    splashColor: Colors.pink[900],
                    backgroundColor: Colors.pink[250],
                  ),
                  FloatingActionButton(
                    onPressed: () {},
                    child: const Icon(Icons.cancel),
                    splashColor: Colors.pink[900],
                    backgroundColor: Colors.pink[250],
                  ),
                  FloatingActionButton(
                    onPressed: () {},
                    child: const Icon(Icons.favorite),
                    splashColor: Colors.pink[900],
                    backgroundColor: Colors.pink[250],
                  ),
                  FloatingActionButton(
                    onPressed: () {},
                    child: const Icon(Icons.check_circle),
                    splashColor: Colors.pink[900],
                    backgroundColor: Colors.pink[250],
                  ),
                  FloatingActionButton(
                    onPressed: () {},
                    child: const Icon(Icons.share),
                    splashColor: Colors.pink[900],
                    backgroundColor: Colors.pink[250],
                  ),
                ],
              ),
            ),
          ],
        ),