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

flutter drawer header height

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())
flutter drawer header default height
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)))
flutter drawer header height

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

So this is how you can easily change Flutter drawer header height in your own code as well.
Do comment if you still have any questions related to the customization of Flutter drawer header height. I’d be very happy to answer all your questions.
The complete source code of custom Flutter drawer header height is given in the next section.

Custom Flutter Drawer Header Height Complete Source Code

flutter drawer header height

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()));
  }
}

Conclusion

To conclude this post, hope you now have a detailed practical knowledge of how to properly customize Flutter drawer header height. I’ll be very delighted to have your feedback on this post.

I’d highly encourage you to visit my other posts as well. Thank you for reading this article.

Leave a Comment

Your email address will not be published. Required fields are marked *