How to add Multiple Floating button in Stack Widget in Flutter How to add Multiple Floating button in Stack Widget in Flutter dart dart

How to add Multiple Floating button in Stack Widget in Flutter


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.


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


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