Flutter toolbar overlapping below status bar

I am wondering where the top edge of application starts in flutter. Look at the following hello world app:

[![enter image description here][1]][1]

The debug banner has gone below the status bar, which indicates that the top edge of my application starts from the edge of the screen. However, the application's `AppBar` has been place right after the status bar. This insconsistency is confusing me! Is the small part of application overlapped under status bar part of my application or not? Why is the `AppBar` not under status bar? How can I decide how my app should overlap with status bar? And what's the best practice here? Is overlapping the application header with status bar a good practice?

[1]:

Actually, the appbar _is_ partially under the status bar. It just has an internal padding to handle it correctly


This is very clear when you remove the appbar :


Scaffold(
body: Text("Hello"),
)


In this situation, it will render "Hello" under the status bar.



You can fix this by wrapping your body into a `SafeArea` :



Scaffold(
body: SafeArea(
child: Text("Hello"),
),
),