4

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:

Big Drawer Header

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:

Small Header

It works as it should!

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

Michel Feinstein
  • 13,416
  • 16
  • 91
  • 173

3 Answers3

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"),
              )
            ],
          ),
        ),
Plutian
  • 2,276
  • 3
  • 14
  • 23
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
4

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

Andrii Turkovskyi
  • 27,554
  • 16
  • 95
  • 105
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),
          ),
        ],
      ),
    ),
  ), 
Saed Nabil
  • 6,705
  • 1
  • 14
  • 36