Flutter position stack widget in center

Question

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

Answer 1

To center the ButtonBar widget at the bottom of the stack, you can try changing the alignment property of the Positioned widget to Alignment.bottomCenter, like this:

new Positioned(
  bottom: 0.0,
  left: 0.0,
  right: 0.0,
  child: new Container(
    margin: const EdgeInsets.all(16.0),
    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 this code, we have set the bottom property of the Positioned widget to 0.0 to position the container at the bottom of the stack. We have also set the left and right properties to 0.0 to make the container fill the entire width of the screen.

Note that we have removed the Column widget and the Align widget, as they are not necessary for centering the ButtonBar widget. We have also set the mainAxisAlignment property of the ButtonBar widget to MainAxisAlignment.center to center its children horizontally.