Flutter layout without AppBar

Question

I need a layout without an appbar, so the most obvious approach is to just leave out the appbar tag on the Scaffold but if I do that the content goes underneath the status bar like this:

As you can see my container which is colored in blue starts right from underneath the status bar which shouldn't be the case, so I had to manually set the margin of the container which is not so nice, this is the results:

I have this feeling that devices might have status bars with varying heights so setting my top margin to fixed size might not render properly on other devices. Is there a way for flutter to position my content automatically below the status like it positions the AppBar nicely below the status bar.

Here is my scaffold code:

return new Scaffold(
      body: new Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          new HeaderLayout(),
        ],
      ),
    );

This is my header container:

class HeaderLayout extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return new Container(
      color: Colors.blue,
      margin: const EdgeInsets.only(top: 30.0),
      child: new SizedBox(
        height: 80.0,
        child: new Center(
          child: new Text(
              "Recommended Courses",
              style: new TextStyle(color: Colors.white),
          ),
        ),
      )
    );
  }

}

Answer 1

Wrap your Column with SafeArea

  body: new SafeArea(
      child: new Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          new HeaderLayout(),
        ],
      )
  ) ,

SafeArea is a widget that insets its child by sufficient padding to avoid intrusions by the operating system. For example, this will indent the child by enough to avoid the status bar at the top of the screen.