How to have 2 Floating Action Buttons fixed in some specific positions with Flutter? - flutter

Question

I am developing an app with Flutter, and I want to have 2 FABs on the main screen. One in the BottomAppBar which I have done.
Scaffold(
appBard: AppBar(title: Text("My App")),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: ()=>{}
),
bottomNavigationBar: BottomAppBar(
color: Style.darkPrimaryColor,
shape: CircularNotchedRectangle(),
child: Container(
height: 50,
child: Row(
children: <Widget>[]
),
),
),
)
I want to have a second FAB positioned and fixed in the right bottom side of the screen in plus of the centered FAB like the following maquette:
Is there any way to achieve that?

Answer 1

I don't think there is any built in way of doing this with the scaffold, but it should be easy enough to just use a stack as your scaffold body, since you can add a floating action button anywhere. However, if you have two, you will need to change the hero tag on one of them to avoid errors when moving to/from that page.
Scaffold(
appBar: AppBar(title: Text("My App")),
floatingActionButtonLocation:
FloatingActionButtonLocation.centerDocked,
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: ()=>{}
),
bottomNavigationBar: BottomAppBar(
color: Style.darkPrimaryColor,
shape: CircularNotchedRectangle(),
child: Container(
height: 50,
child: Row(
children: <Widget>[]
),
),
),
body: Stack(
alignment: Alignment.bottomRight,
children: [
Container(
child: //Use this as if it were the body
),
//Setup the position however you like
Padding(
padding: const EdgeInsets.all(16.0),
child: FloatingActionButton(
heroTag: null, //Must be null to avoid hero animation errors
child: Icon(Icons.add),
onPressed: () => {},
),
),
],
),
)

Answer 2

Try this:
Scaffold(
appBar: AppBar(title: Text("My App")),
body: Stack(
children: [
Positioned(
bottom: 16,
right: 16,
child: FloatingActionButton(
heroTag: null,
child: Icon(Icons.add),
onPressed: ()=>{}
),
),
],
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: ()=>{}
),
bottomNavigationBar: BottomAppBar(
color: Colors.black54,
shape: CircularNotchedRectangle(),
child: Container(
height: 50,
child: Row(
children: <Widget>[
]
),
),
),
)