How to remove Padding from DrawerHeader

Question

Here's my DrawerHeader :

class MyDrawerHeader extends StatefulWidget {
  @override
  _MyDrawerHeaderState createState() => _MyDrawerHeaderState();
}

class _MyDrawerHeaderState extends State<MyDrawerHeader> {
  @override
  Widget build(BuildContext context) {
    return DrawerHeader(
      padding: EdgeInsets.all(0),
      margin: EdgeInsets.all(0),
      child: Center(child: Text('Header', style: Theme.of(context).textTheme.headline))
    );
  }
}

As you can see I made the Padding and Margin from the DrawerHeader be 0, but this is how my Header is being shown:

It's just too big and I can't make it smaller. I have no idea why its being rendered this way, I looked into DrawerHeader source code and I can't see anything in there overriding my Padding or Margin.

Just to be sure the problem is in DrawerHeader, this is what Happens when I substitute it for a Container:

It works as it should!

Am I missing something, or is this a bug in Flutter?

score 5 · Answer 1 · edited Dec 23 '19 at 14:06

5

drawer: Drawer(
          child: ListView(
            padding: EdgeInsets.zero,
            children: [
              DrawerHeader(
                padding: EdgeInsets.all(0.0),
                child: Container(
                  color: Theme.of(context).primaryColor,
                ),
              ),
              ListTile(
                title: Text("Home"),
              )
            ],
          ),
        ),

edited Dec 23 '19 at 14:06

Plutian

2,276
3
14
23

answered Dec 23 '19 at 10:47

Joel jones

639
8
13

Hi and welcome to stackoverflow, and thank you for your answer. Rather than just posting a block of code, can you give a short explanation to what the issue is you solved and how you solved it? This will help people who find this question in the future to better understand the issue and how to deal with it. – Plutian Dec 23 '19 at 11:06
2

padding: EdgeInsets.all(0.0), Works for me. Thanks – Naeem Ibrahim Feb 19 '20 at 16:47
Previous comment from @NaeemIbrahim should be the accepted answer. Simplest solution that works and directly addresses op's request. – Subfuzion Mar 19 '21 at 18:59
Instead of `padding: EdgeInsets.all(0.0)` you could just do `padding: EdgeInsets.zero`. – user1029978 Nov 09 '21 at 14:44

score 4 · Accepted Answer · answered Nov 19 '18 at 07:31

There is always padding on DrawerHeader. If you look in sources:

@override
Widget build(BuildContext context) {
  assert(debugCheckHasMaterial(context));
  assert(debugCheckHasMediaQuery(context));
  final ThemeData theme = Theme.of(context);
  final double statusBarHeight = MediaQuery.of(context).padding.top;
  return Container(
    height: statusBarHeight + _kDrawerHeaderHeight,
    margin: margin,
    decoration: BoxDecoration(
      border: Border(
        bottom: Divider.createBorderSide(context),
      ),
    ),
    child: AnimatedContainer(
      padding: padding.add(EdgeInsets.only(top: statusBarHeight)),
      decoration: decoration,
      duration: duration,
      curve: curve,
      child: child == null ? null : DefaultTextStyle(
        style: theme.textTheme.body2,
        child: MediaQuery.removePadding(
          context: context,
          removeTop: true,
          child: child,
        ),
      ),
    ),
  );
}

You can customize this code:

height: statusBarHeight + _kDrawerHeaderHeight - here is total height of header

padding: padding.add(EdgeInsets.only(top: statusBarHeight)) - here is padding of child element in DrawerHeader

Oh yeah, you are right! `_kDrawerHeaderHeight` is defined on the top of the class, I missed it! Thanks! — Michel Feinstein, Nov 19 '18 at 23:25

Saed Nabil · Answer 3 · 2018-11-18T17:18:38.207

1

Try replacing your drawer by the code below

drawer: Drawer(
    child: DrawerHeader(
      child: ListView(
        children: <Widget>[
          Container(
            alignment: Alignment.topLeft,
            child: Text('Header', style: Theme.of(context).textTheme.headline),
          ),
        ],
      ),
    ),
  ),

edited Nov 18 '18 at 17:18

answered Nov 18 '18 at 17:13

Saed Nabil

6,705
1
14
36

How to remove Padding from DrawerHeader

3 Answers3