A Quick Guide to Set Flutter Drawer Header Height

You must have seen the slider-like menu that comes out from the left side of the screen (mostly) as you tap on the AppBar icon. We call it Drawer and it has a couple of actionable buttons that you can access and navigate to their page directly. In Flutter, a drawerheader is the same menu that appears when we type the three lines button that appears on the top left side of the Gmail app and has the buttons like “All inboxes, primary, social, promotions”, etc.

In this blog, we will discover how to change flutter drawerheader height in an easy way. We will be giving you a demo of this and providing the output screenshot with a sample code as well. Sounds exciting? 😛

Let’s jump right into it. 😉

How to add Drawer Header in Flutter?

To add a drawer header in Flutter, you can simply use DrawerHeader class and assign any color using the ‘color’ property in the ‘BoxDecoration’ class. Let’s do this by giving you an example.

Code

DrawerHeader(
    decoration: BoxDecoration(color: Colors.black),
    child: Text(
      'Drawer Header',
      style: TextStyle(color: Colors.white),
    ),
  ),
),

Output

Now, let’s move toward knowing how to change drawer header height in Flutter.

How to change drawer header height in Flutter?

If you want to change drawer header height, you will need to wrap the DrawerHeader class inside the SizedBox widget. This is because DrawerHeader class doesn’t have any property that could handle drawerheader height.

So we use the SizedBox widget to change drawer header height because it has properties of ‘height’ and ‘width’. You can specify Flutter drawer header height as much as you can. Just change the value of the ‘height’ class and you’ll notice the change in DrawerHeader height.

Let’s do it ourselves. 😍

Code

@override
  Widget build(BuildContext context) {
    final padding = MediaQuery.of(context).padding;
    return Scaffold(
      appBar: AppBar(
        title: const Text('Drawer Header in Flutter'),
      ),
      drawer: Drawer(
        child: Padding(
          padding: EdgeInsets.only(top: padding.top),
          child: Column(
            children: [
              const SizedBox(
                height: 100, // To change the height of DrawerHeader
                width: double.infinity, // To Change the width of DrawerHeader
                child: DrawerHeader(
                  decoration: BoxDecoration(color: Colors.purple),
                  child: Text(
                    'Drawer Header',
                    style: TextStyle(color: Colors.white),
                  ),
                ),
              ),
              ListTile(
                title: const Text('Profile'),
                leading: const Icon(Icons.person_outline),
                onTap: () {},
              ),
              ListTile(
                leading: const Icon(Icons.settings_outlined),
                title: const Text('Settings'),
                onTap: () {},
              ),
            ],
          ),
        ),
      ),
    );
  }

Output

As you can see, we have used the SizedBox widget to wrap the DrawerHeader class. It will allow you to change the DrawerHeader height according to your needs. In this way, we can specify any height for the DrawerHeader using the height property. Moreover, you can change the drawer header color as well. Simply choose any color from the colors property of BoxDecoration and that’s it.

Conclusion

The DrawerHeader height in flutter can be set using the height property as it’s an important aspect of customization for the flutter drawerheader. It also helps in providing an optimal user experience. Drawer Header height can be adjusted according to the requirement, which will help in providing a better view of the Drawerheader contents.

That was it for this quick guide to adding Drawer Header and changing its height. We hope you may find this article helpful for you.

If you’re looking for a Flutter app development company to hire Flutter developers then you can count on us for that. We have a team of highly qualified Flutter developers who can turn any of your complex business ideas into real-world applications.

See you in the next blog. Cheers!

Bashir Ahmad

When not savoring tortillas, Bashir captivates readers with helpful and engaging prose, driven by his passion for Flutter and a dedication to providing value.