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

<p><a href="https://i.stack.imgur.com/j1AzG.png" rel="noreferrer"><img src="https://i.stack.imgur.com/j1AzG.png" alt="enter image description here"></a></p>

<p>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:</p>

<p><a href="https://i.stack.imgur.com/keN2R.png" rel="noreferrer"><img src="https://i.stack.imgur.com/keN2R.png" alt="enter image description here"></a></p>

<p>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 <code>AppBar</code> nicely below the status bar.</p>

<p>Here is my scaffold code:</p>

<pre><code>return new Scaffold(
      body: new Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: &lt;Widget&gt;[
          new HeaderLayout(),
        ],
      ),
    );
</code></pre>

<p>This is my header container:</p>

<pre><code>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),
          ),
        ),
      )
    );
  }

}
</code></pre>
