Issue
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
Solution
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.
Answered By - creativecreatorormaybenot
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.