How to add Multiple Floating button in Stack Widget in Flutter

dart widget stack flutter

52,149

Solution 1

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.

Solution 2

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),
      )
    ],
  ),
)

Solution 3

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,
             ...),
    ),
  ],
)

Solution 4

floatingActionButton: Stack(
      children: <Widget>[
        Padding(padding: EdgeInsets.only(left:31),
        child: Align(
          alignment: Alignment.bottomLeft,
          child: FloatingActionButton(
            onPressed: picker,
            child: Icon(Icons.camera_alt),),
        ),),

        Align(
          alignment: Alignment.bottomRight,
          child: FloatingActionButton(
            onPressed: picker2,
          child: Icon(Icons.add_photo_alternate),),
        ),
      ],
    )

Solution 5

  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),
        ),
      ],
    ),
  ),

View more solutions

52,149

Magesh Pandian

Techie by Birth. Observer by Nature. Unpredictable by Character. Mobile Developer by Profession.

Updated on July 09, 2022

Comments

Magesh Pandian almost 2 years

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 right side but I dnt know how to add floating button left side. Simple like below image.

Any help will appreciable
Jithin over 5 years

But my left alignment gets out of the screen?
gongqj almost 5 years

@KevinRED Same here
LordWilmore almost 5 years

The formatting of this answer really needs to be tidied up. Also please consider adding some commentary to describe your answer, particularly highlighting which parts resolve the described problem.
Eradicatore almost 5 years

I had to make sure to set "heroTag: null," for each floating action button, per this article: medium.com/@kaendagger/test-cef30fcb5c54. Otherwise, you get a black screen.
Mahesh Peri almost 5 years

This suits my requirement. I need both buttons should be at center. So i have changed "mainAxisAlignment: MainAxisAlignment.center". Thanks
Rich Steinmetz over 4 years

it is not clear what floatingActionButtonLocation and floatingActionButton are, neither where they fit in inside the Stack widget mentioned by the OP. Neither what the formatting is supposed to indicate.
smedasn about 3 years

thats the best answer! is it also possible to notch the buttons in a BottomAppBar?
Simas Joneliunas almost 3 years

Please consider adding a description to the code so that we would understand WHY it solves the op's issue