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