How do I change the height of the DrawerHeader in flutter?

1,242

Solution 1

You can do two things here:

Either use a SizedBox or you can use a customized Container in place of DrawerHeader

SizedBox(
  height: 150.0,
  child: DrawerHeader(
    //add further code here
  ),
),

//OR YOU CAN DO THIS

Drawer(
  child: ListView(
    children: [
      Container(
        height: 150.0,
        child: //add futher code here
      ),
    ],
  ),
)

Solution 2

Add SizeBox above DrawerHeader

     SizedBox(
              height: 100,
              child: DrawerHeader(
                child: Text('data '),
                decoration: BoxDecoration(color: Colors.green),
              ),
            ),
Share:
1,242
Ronak Patel
Author by

Ronak Patel

let me = Developer(language: .swift)

Updated on December 22, 2022

Comments

  • Ronak Patel
    Ronak Patel over 1 year

    I want to change the height of the drawer header. I have created a side bar with the help of the drawer but not able to change the height of drawer header.

    I'm new in Flutter development.

    I have tried this code,

    drawer: Container(
            child: ClipRRect(
              borderRadius: BorderRadius.only(
                  topRight: Radius.circular(30), bottomRight: Radius.circular(30)),
              child: Drawer(
                child: ListView(
                  padding: EdgeInsets.only(
                    top: 0.0,
                  ),
                  scrollDirection: Axis.vertical,
                  children: <Widget>[
                    DrawerHeader(
                      child: Text('data '),
                      decoration: BoxDecoration(color: Colors.green),
                    ),
                    ListTile(
                      title: Text('Home'),
                      leading: Icon(Icons.home, color: Colors.red),
                      
                    ),
                  ],
                ),
              ),
            ),
          ),
    
  • Ronak Patel
    Ronak Patel almost 4 years
    I used your second option container but after doing this I'm not able fix my list view
  • littleironical
    littleironical almost 4 years
    What do you mean by fixing list view? Is this about fixing the header and moving only the contents below that?