How to add Multiple Floating button in Stack Widget in Flutter

In flutter one view over another view using [Stack Widget][1]. 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.

[![enter image description here][2]][2]

Any help will appreciable


[1]:

[To see links please register here]

[2]:

You can use the [`Align`](

[To see links please register here]

) widget to position your [`FloatingActionButton`'s](

[To see links please register here]

) in the [`Stack`](

[To see links please register here]

).

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

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

just add **row** as **floatingActionButton** in **Scafold** and set position **centerFloat**

as **EX**

Scaffold(
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
//store btn
floatingActionButton: Container(
child: Row(
children: <Widget>[
//add left Widget here with padding left
Spacer(
flex: 1,
),
//add right Widget here with padding right
],
),
),
);

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

if this tree happen
There are multiple heroes that share the same tag within a subtree.

floatingActionButton: Stack(
children: <Widget>[
Padding(
padding: EdgeInsets.only(right: 70),
child: Align(
alignment: Alignment.bottomRight,
child: FloatingActionButton.extended(
heroTag: "btn1",
// backgroundColor: Color(0XFF0D325E),
backgroundColor: Colors.red,
// child: Icon(Icons.refresh),
label: Text('Clear All Wifi'),
onPressed: () {
_sendMessage(all: 'Clear Wifi');
}),
),
),
Align(
alignment: Alignment.bottomRight,
child: FloatingActionButton(
heroTag: "btn2",
backgroundColor: Color(0XFF0D325E),
child: Icon(Icons.refresh),
onPressed: () {
_sendMessage(all: 'GETALLWIFI');
}),
),
],
),

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

[![enter image description here][1]][1]


[1]:

Simply clever ;)

Stack(
children: [
Container(...),
Positioned(
right: 15,
bottom: 15,
child: FloatingActionButton(
heroTag: 'edit',
onPressed: () {},
child: Icon(Icons.edit),
),
),
Positioned(
left: 15,
bottom: 15,
child: FloatingActionButton(
heroTag: 'delete',
onPressed: () {},
child: Icon(Icons.delete),
),
),
],
)

**You can also use something like this using location as centerDocked so that you don't get that weird left alignment.**

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

```dart
Scaffold(
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: Padding(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 12),
child: Row(
children: [
FloatingActionButton(
onPressed: () {},
backgroundColor: Colors.red,
child: Icon(Icons.remove),
),
Spacer(),
FloatingActionButton(
onPressed: () {},
child: Icon(Icons.add),
),
],
),
),
);
```

[![enter image description here][1]][1]


[1]: