How do I align one widget to the top of the screen and center another widget to the middle of the screen in Flutter?

Question

Within the same body I'm trying to align one widget to the top of the screen and another to the center of the screen. This is proving difficult.

Here is my code:

body: Column(children: <Widget>[
        Row(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Container(
              color: Colors.redAccent,
              width: screenWidth,
              height: 50.0,
              child: Center(
                child: Text(
                  "Hello World!",
                  style: TextStyle(
                    fontSize: 18.0,
                    color: Colors.white,
                  ),
                ),
              ),
            ),
          ],
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Container(
              color: Colors.blueAccent,
              width: screenWidth,
              height: 50.0,
              child: Center(
                child: Text(
                  "Thanks for the help!",
                  style: TextStyle(
                    fontSize: 18.0,
                    color: Colors.white,
                  ),
                ),
              ),
            ),
          ],
        ),
      ]),

When this code is run in my Xcode simulator this is the result:

https://i.imgur.com/JtPKyq0.png

So to be clear this result is wrong because I want the blue container to be at the center of the screen, not the top.

Thanks in advance for any help!

Answer 1

One option is to use an Expanded widget. This widget will expand fill all the space available in the parent, and then you center the child inside it. Note that this only works inside Flex widgets, like Row, Column etc.

In your case, I also recommend removing the screenWidth variable for the row width, and use the Expanded widget to make the container fill the screen horizontally.

This is the final code:

body: Column(children: <Widget>[
    Row(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Expanded( //makes the red row full width
          child: Container(
            color: Colors.redAccent,
            height: 50.0,
            child: Center(
              child: Text(
                "Hello World!",
                style: TextStyle(
                  fontSize: 18.0,
                  color: Colors.white,
                ),
              ),
            ),
          ),
        ),
      ],
    ),
    // This expands the row element vertically because it's inside a column
    Expanded( 
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          // This makes the blue container full width.
          Expanded(
            child: Container(
              color: Colors.blueAccent,
              height: 50.0,
              child: Center(
                child: Text(
                  "Thanks for the help!",
                  style: TextStyle(
                    fontSize: 18.0,
                    color: Colors.white,
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    ),
  ]
),