flutter custom appbar vertical position relative to status bar

Question

I used the example in the following link to create a custom appBar.

The code works, however the appbar is positioned at the top of the screen behind the Android status bar

How can I position the appBar such that it starts rendering under the status bar?

version used:

• Flutter 1.26.0-8.0.pre • channel dev
• Android R30

Answer 1

There is a widget called SafeArea that set the padding of your widget to avoid the intrusion of the status bar. You can use it as:

// Use the SafeArea here to position the AppBar under the status bar
SafeArea( 
   child: Scaffold(
      appBar: PreferredSize(
        preferredSize: Size(double.infinity, 100),
        child: Container(
          decoration: BoxDecoration(

          // ... other lines