Flutter position stack widget in center
You can use the Positioned.fill
with Align
inside a Stack
:
Stack(
children: <Widget>[
Positioned.fill(
child: Align(
alignment: Alignment.centerRight,
child: ....
),
),
],
),
Probably the most elegant way.
You can simply use the alignment
option present in Stack
child: Stack(
alignment: Alignment.center
)
Remove everything, but this:
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),
),
)
],
),
)
In my theory, the additional Container
is destroying it. I would advise you to just surround this by adding Padding
:
Padding(
padding: EdgeInsets.only(bottom: 20.0),
child: Align...
),
This seems a lot more reasonable to me than the Positioned
and also I do not quite understand your Column
with a single child only.
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,
),
),
]
)
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
),
)
]
)