How can I create a Drawer below status bar in Flutter?

Question

I want to make something like this, but always get this:

Scaffold(
  drawer: Drawer(..),
  ..
)

How do I create a Drawer that is not displayed in the status bar?

Answer 1

For this kind of scenario, Flutter has the SafeArea widget. This widget will make sure that nothing is rendered e.g. beneath the status bar, i.e. a padding is added.

To apply this to your Drawer, you can simply wrap your Drawer with a SafeArea:

Scaffold(
  drawer: SafeArea(
    child: Drawer(..),
  ),
  ..
)

Screenshot of the drawer

You can also specify if you want to remove some of the padding added by SafeArea using the optional parameters top, bottom, left & right, e.g. SafeArea(bottom: false, ..).

Answer 2

Adding the padding: const EdgeInsets.all(0.0), to ListView resolves the issue.