Flutter toolbar overlapping below status bar

April 22, 2023 by Tarik

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