How To Change Flutter Drawer Header Height – Easy Flutter Code Example

In this article, we’ll learn how to properly customize Flutter drawer header height.

We’ll explain it step by step by using an easy but proper Flutter code example. We will first see the default height of drawer. After that, we’ll customize it by using a practical code example.

After reading this post, you’ll have a detailed practical knowledge of how to easily change Flutter drawer header height in your own Flutter code with ease.

So what are we both waiting for? Let’s get right into it.

What is Flutter Drawer Header Height?

As the name suggests, its the vertical size of header widget. We’ll be using this header inside Flutter drawer widget. Let’s start implementing the customization of header height using a practical Flutter example.

Customizing Flutter Drawer Header Height (Easy Code Example)

Follow the below steps:

• Pass a Flutter appbar widget to the appbar constructor of scaffold class. Reason is that the drawer icon will be shown in that appbar.
• Use the drawer constructor of the scaffold class and pass it a Flutter drawer widget.
• Now we’ve a drawer icon in our Flutter appbar and after clicking it, a drawer appears on our screen.
• To implement a header in drawer, we’ve to use the child constructor of Flutter drawer widget class. It takes a widget so we can either pass a header widget directly to it or we can pass a column widget and pass header widget to the children constructor of column widget.
• We’ll use the column widget. Reason is that maybe you would want to add some more widgets to it vertically. So we’ll use column.
• Now we’ll pass the Flutter drawer header widget to the column children list of widgets.
• This header widget has a child constructor so we’ll pass a container widget to it and give that container some background color.

Let’s now see all these steps in a practical code format. See below code:

Scaffold(
            drawer: Drawer(
              child: Column(
                children: [
                  DrawerHeader(child: Container(color: Colors.green)),
                ],
              ),
            ),
            appBar: AppBar())

You can see that we now have a header widget with its own default height. Let’s now see how to customize it.

Using SizedBox Widget

We’ve to wrap this header widget with Flutter sizedBox widget. By using the height constructor of sizedBox class, we can easily customize the vertical size of header. For demonstration, we’ll pass a custom height to it. See below code:

  SizedBox(
         height: 100,
         child: DrawerHeader(
               child: Container(color: Colors.green)))

As you can see here, the Flutter drawer header height is not successfully customized.

import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Homepage(),
    );
  }
}
class Homepage extends StatefulWidget {
  @override
  State<Homepage> createState() => _HomepageState();
}
class _HomepageState extends State<Homepage> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
            drawer: Drawer(
              child: Container(
                child: Column(
                  children: [
                    SizedBox(
                        height: 100,
                        child: DrawerHeader(
                            child: Container(color: Colors.green))),
                  ],
                ),
              ),
            ),
            appBar: AppBar()));
  }
}