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

Any help will appreciable

Answer 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.

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

Example result: