How to add Multiple Floating button in Stack Widget in Flutter

Question

In flutter one view over another view using Stack Widget. It\'s work fine. Now I need to added two floating button left and right side of bottom of screen. I added one button ri

Answer 1

  floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
  floatingActionButton: Container(
    padding: EdgeInsets.symmetric(vertical: 0, horizontal: 10.0),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        FloatingActionButton(
          onPressed: _someBackMethod,
          child: Icon(Icons.arrow_back),
        ),
        FloatingActionButton(
          onPressed: _someForwardMethod,
          child: Icon(Icons.arrow_forward),
        ),
      ],
    ),
  ),

Answer 2

if this tree happen There are multiple heroes that share the same tag within a subtree.

floatingActionButton: Stack(
  children: <Widget>[
   Padding(
    padding: EdgeInsets.only(right: 70),
      child: Align(
        alignment: Alignment.bottomRight,
           child: FloatingActionButton.extended(
                  heroTag: "btn1",
                  // backgroundColor: Color(0XFF0D325E),
                  backgroundColor: Colors.red,
                  // child: Icon(Icons.refresh),
                  label: Text('Clear All Wifi'),
                  onPressed: () {
                    _sendMessage(all: 'Clear Wifi');
                  }),
            ),
          ),
          Align(
            alignment: Alignment.bottomRight,
            child: FloatingActionButton(
                heroTag: "btn2",
                backgroundColor: Color(0XFF0D325E),
                child: Icon(Icons.refresh),
                onPressed: () {
                  _sendMessage(all: 'GETALLWIFI');
                }),
          ),
        ],
      ),

Answer 3

You can also use something like this using location as centerDocked so that you don't get that weird left alignment.

floatingActionButtonLocation:
              FloatingActionButtonLocation.centerDocked,
          floatingActionButton: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                FloatingActionButton(
                  onPressed: () {},
                  child: Icon(Icons.navigate_before),
                ),
                FloatingActionButton(
                  onPressed: () {},
                  child: Icon(Icons.navigate_next),
                )
              ],
            ),
          )

Answer 4

just add row as floatingActionButton in Scafold and set position centerFloat

as EX

Scaffold(
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
      //store btn
      floatingActionButton: Container(
        child: Row(
          children: <Widget>[
            //add left Widget here with padding left
            Spacer(
              flex: 1,
            ),
            //add right Widget here with padding right
          ],
        ),
      ),
    );

Answer 5

Don't forget to set "heroTag: null," for each floating action button. otherwise you'll get a black screen!

Stack(
  children: <Widget>[
    Align(
      alignment: Alignment.bottomLeft,
      child: FloatingActionButton(
                heroTag: null,
             ...),
    ),
    Align(
      alignment: Alignment.bottomRight,
      child: FloatingActionButton(
                heroTag: null,
             ...),
    ),
  ],
)

Answer 6

You can use the Align widget to position your FloatingActionButton's in the Stack.

Stack(
  children: <Widget>[
    Align(
      alignment: Alignment.bottomLeft,
      child: FloatingActionButton(...),
    ),
    Align(
      alignment: Alignment.bottomRight,
      child: FloatingActionButton(...),
    ),
  ],
)

One button uses constant Alignment.bottomLeft for its alignment property and the other one respectively Alignment.bottomRight.