Flutter position stack widget in center

0 votes

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

Mar 29, 2023 in Flutter by sarit
• 1,830 points
3,357 views

1 answer to this question.

0 votes

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.

answered Mar 29, 2023 by seena

Related Questions In Flutter

0 votes
1 answer

Linking 3 Flutter Projects in One Flutter Project

Yes, it is possible to combine multiple ...READ MORE

answered Mar 20, 2023 in Flutter by vinayak
663 views
0 votes
1 answer

Is Flutter/Dart valuable in the professional setting?

Yes, Flutter and Dart are valuable skills ...READ MORE

answered Mar 21, 2023 in Flutter by vani
474 views
0 votes
1 answer

How to change Android minSdkVersion in Flutter Project?

Yes, you can change the minSdkVersion in ...READ MORE

answered Mar 21, 2023 in Flutter by Tej
10,961 views
0 votes
1 answer

Multi-line TextField in Flutter

To create a multi-line TextField in Flutter, ...READ MORE

answered Mar 21, 2023 in Flutter by vishalini
3,337 views
0 votes
1 answer

Dart_LoadScriptFromKernel: The binary program does not contain 'main'.

Hi@akhtar, You need to add the main() function ...READ MORE

answered Jul 21, 2020 in Others by MD
• 95,460 points
3,513 views
0 votes
1 answer

How to install Dart in Windows system?

Hi@akhtar, Dart is the programming language used to code Flutter apps. ...READ MORE

answered Jul 21, 2020 in Others by MD
• 95,460 points
1,064 views
0 votes
1 answer

flutter run: No connected devices

Hi@akhtar, To prepare to run and test your ...READ MORE

answered Jul 21, 2020 in Others by MD
• 95,460 points
4,090 views
0 votes
1 answer

How to create a function in Dart language?

Hi@akhtar, There are many function types available in ...READ MORE

answered Jul 22, 2020 in Others by MD
• 95,460 points
725 views
0 votes
1 answer

How to get barcode from PDA scanner device in flutter

It's possible that the data sent by ...READ MORE

answered Apr 3, 2023 in Flutter by seena
1,875 views
0 votes
1 answer

How to prevent deprecated flutter widgets suggestions in vs code?

To prevent deprecated Flutter widgets suggestions in ...READ MORE

answered Apr 6, 2023 in Flutter by vinayak
1,027 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP