Flutter toolbar overlapping below status bar

Question

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

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?

Answer 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"),   ), ),