Posts: 1
Threads: 1
Joined: Aug 2017
Reputation:
0
Level: 1 []
Total Points: 0
Rank 0 / 1
99% to upload Level
Activity 0 / 1
99% to upload your Rank
Experience 1
99% to upload Experience
Points: 50
|
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]:
|
Posts: 0
Threads: 0
Joined: May 2017
Reputation:
0
Level: inf []
Total Points: inf
Rank nan / 1
100% to upload Level
Activity inf / 1
99% to upload your Rank
Experience nan
100% to upload Experience
Points: 50
|
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`.
|
Posts: 0
Threads: 0
Joined: Feb 2023
Reputation:
0
Level: inf []
Total Points: inf
Rank nan / 1
100% to upload Level
Activity inf / 1
99% to upload your Rank
Experience nan
100% to upload Experience
Points: 50
|
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),),
),
],
)
|
Posts: 0
Threads: 0
Joined: Jan 2022
Reputation:
0
Level: inf []
Total Points: inf
Rank nan / 1
100% to upload Level
Activity inf / 1
99% to upload your Rank
Experience nan
100% to upload Experience
Points: 50
|
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
],
),
),
);
|
Posts: 0
Threads: 0
Joined: Aug 2017
Reputation:
0
Level: inf []
Total Points: inf
Rank nan / 1
100% to upload Level
Activity inf / 1
99% to upload your Rank
Experience nan
100% to upload Experience
Points: 50
|
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,
...),
),
],
)
|
Posts: 0
Threads: 0
Joined: Oct 2021
Reputation:
0
Level: inf []
Total Points: inf
Rank nan / 1
100% to upload Level
Activity inf / 1
99% to upload your Rank
Experience nan
100% to upload Experience
Points: 50
|
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');
}),
),
],
),
|
Posts: 0
Threads: 0
Joined: Dec 2018
Reputation:
0
Level: inf []
Total Points: inf
Rank nan / 1
100% to upload Level
Activity inf / 1
99% to upload your Rank
Experience nan
100% to upload Experience
Points: 50
|
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]:
|
Posts: 0
Threads: 0
Joined: Jan 2023
Reputation:
0
Level: inf []
Total Points: inf
Rank nan / 1
100% to upload Level
Activity inf / 1
99% to upload your Rank
Experience nan
100% to upload Experience
Points: 50
|
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),
),
),
],
)
|
Posts: 0
Threads: 0
Joined: Oct 2021
Reputation:
0
Level: inf []
Total Points: inf
Rank nan / 1
100% to upload Level
Activity inf / 1
99% to upload your Rank
Experience nan
100% to upload Experience
Points: 50
|
**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),
)
],
),
)
```
|
Posts: 0
Threads: 0
Joined: Dec 2019
Reputation:
0
Level: inf []
Total Points: inf
Rank nan / 1
100% to upload Level
Activity inf / 1
99% to upload your Rank
Experience nan
100% to upload Experience
Points: 50
|
```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]:
|
|