I have widgets in a stack so I'd like to position my button bar in the bottom center of the stack but nothing works. The widget just sticks to the left side. here is my code.
new Positioned(
bottom: 40.0,
child: new Container(
margin: const EdgeInsets.all(16.0),
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Align(
alignment: Alignment.bottomCenter,
child: new ButtonBar(
alignment: MainAxisAlignment.center,
children: <Widget>[
new OutlineButton(
onPressed: () {
Navigator.push(
context,
new MaterialPageRoute(
builder: (context) => new LoginPage()));
},
child: new Text(
"Login",
style: new TextStyle(color: Colors.white),
),
),
new RaisedButton(
color: Colors.white,
onPressed: () {
Navigator.push(
context,
new MaterialPageRoute(
builder: (context) =>
new RegistrationPage()));
},
child: new Text(
"Register",
style: new TextStyle(color: Colors.black),
),
)
],
),
)
],
),
),
)
I have literally tried every center alignment, please help
For anyone who is reaching here and is not able to solve their issue, I used to make my widget horizontally center by setting both right and left to 0 like below:
Stack(
children: <Widget>[
Positioned(
top: 100,
left: 0,
right: 0,
child: Text("Search",
style: TextStyle(
color: Color(0xff757575),
fontWeight: FontWeight.w700,
fontFamily: "Roboto",
fontStyle: FontStyle.normal,
fontSize: 56.0),
textAlign: TextAlign.center),
),
]
)
You can try this too:
Center(
child: Stack(
children: [],
),
)
You can simply use the alignment
option present in Stack
child: Stack(
alignment: Alignment.center
)
A Stack
allows you to stack elements on top of each other, with the last element in the array taking the highest priority. You can use Align
, Positioned
, or Container
to position the children of a stack.
Align
Widgets are moved by setting the alignment with Alignment
, which has static properties like topCenter
, bottomRight, and so on. Or you can take full control and set Alignment(1.0, -1.0)
, which takes x,y values ranging from 1.0 to -1.0, with (0,0) being the center of the screen.
Stack(
children: [
Align(
alignment: Alignment.topCenter,
child: Container(
height: 80,
width: 80, color: Colors.blueAccent
),
),
Align(
alignment: Alignment.center,
child: Container(
height: 80,
width: 80, color: Colors.deepPurple
),
),
Container(
alignment: Alignment.bottomCenter,
// alignment: Alignment(1.0, -1.0),
child: Container(
height: 80,
width: 80, color: Colors.amber
),
)
]
)
Thanks to all of the above answers I'd like to share something that may come in handy in some certain cases. So lets see what happens when you use Positioned:( right: 0.0, left:0.0, bottom:0.0)
:
Padding(
padding: const EdgeInsets.all(4.0),
child: Stack(
children: <Widget>[
Positioned(
bottom: 0.0,
right: 0.0,
left: 0.0,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: Container(
color: Colors.blue,
child: Center(
child: Text('Hello',
style: TextStyle(color: Color(0xffF6C37F),
fontSize: 46, fontWeight: FontWeight.bold),),
)
),
)
),
],
),
),
This would be the output of the above code:
As you can see it would fill the whole width with the container even though you don't want it and you just want the container to wrap its children. so for this you can try trick below:
Padding(
padding: const EdgeInsets.all(4.0),
child: Stack(
children: <Widget>[
Positioned(
bottom: 0.0,
right: 0.0,
left: 0.0,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: Container(
color: Colors.blue,
child: Text('Hello',
style: TextStyle(color: Color(0xffF6C37F),
fontSize: 46, fontWeight: FontWeight.bold),)
),
),
Container(),
],
)
),
],
),
),
The Best way worked for me, was using Align
.
I needed to make the profile picture of a user in the bottom center of the Cover picture.
return Container(
height: 220,
color: Colors.red,
child: Stack(
children: [
Container(
height: 160,
color: Colors.yellow,
),
Align(
alignment: Alignment.bottomCenter,
child: UserProfileImage(),
),
],
),
);
This worked like a charm.
You can change the Positioned with Align inside a Stack:
Align(
alignment: Alignment.bottomCenter,
child: ... ,
),
For more info about Stack: Exploring Stack
You can use the Positioned.fill
with Align
inside a Stack
:
Stack(
children: <Widget>[
Positioned.fill(
child: Align(
alignment: Alignment.centerRight,
child: ....
),
),
],
),
Have a look at this solution I came up with
Positioned( child: SizedBox( child: CircularProgressIndicator(), width: 50, height: 50,), left: MediaQuery.of(context).size.width / 2 - 25);
The Problem is the Container that gets the smallest possible size.
Just give a width:
to the Container (in red) and you are done.
width: MediaQuery.of(context).size.width
new Positioned(
bottom: 0.0,
child: new Container(
width: MediaQuery.of(context).size.width,
color: Colors.red,
margin: const EdgeInsets.all(0.0),
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Align(
alignment: Alignment.bottomCenter,
child: new ButtonBar(
alignment: MainAxisAlignment.center,
children: <Widget>[
new OutlineButton(
onPressed: null,
child: new Text(
"Login",
style: new TextStyle(color: Colors.white),
),
),
new RaisedButton(
color: Colors.white,
onPressed: null,
child: new Text(
"Register",
style: new TextStyle(color: Colors.black),
),
)
],
),
)
],
),
),
),
Source: Stackoverflow.com