Search code examples
flutterflutter-layout

How to remove Padding from DrawerHeader


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?


Solution

  • 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