2

I encountered an annoying styling issue where if I opened my drawer I would get white space under the navigation bar on Android. Whereas if I wasn't in the drawer it would display the correct color just fine.

Screenshot of app outlining the stylistic error

I'm using the following code for my drawer widget:

drawer: new Drawer(
    child: new  ListView(
        children: <Widget>[
        new UserAccountsDrawerHeader(
            accountEmail: new Text("juhlinus@gmail.com"),
            accountName: new Text("Linus Juhlin"),
            currentAccountPicture: new CircleAvatar(
            backgroundColor: Colors.pinkAccent,
            child: new Text("LJ"),
            ),
            otherAccountsPictures: <Widget>[
            new CircleAvatar(
                backgroundColor: Colors.purpleAccent,
                child: new Text("MH"),
            )
            ],
        ),
        new ListTile(
            title: new Text("Artiklar"),
            leading: new Icon(Icons.web),
        ),
        new ListTile(
            title: new Text("Media"),
            leading: new Icon(Icons.wallpaper),
        ),
        new Divider(),
        new ListTile(
            title: new Text("Inställningar"),
            leading: new Icon(Icons.settings)
        ),
        ],
    ),
),
CC BY-SA 4.0
Improve this question
2

2 Answers 2

Reset to default
7

I found that in source code of Flutter UserAccountsDrawerHeader bottom margin is 8.0 by default. That's why you see this white thin space under header.

So the solution will be setting the bottom margin equal zero:

UserAccountsDrawerHeader(
    margin: EdgeInsets.only(bottom: 0.0),
...

Works fine, without any tricks.

CC BY-SA 4.0
Improve this answer
1
  • Thanks for the research! I've gone ahead and changed your answer to the accepted one, since it better explains the reason for the behavior in my question, as well as a better solution. Thanks!
    – Linus Juhlin
    Feb 8, 2019 at 1:55
7

After some tinkering I figured that it must have been the padding, I tried to remove all padding from the ListView Widget and that did the trick.

I simply added the padding to the ListView like so:

[...]
child: new  ListView(
    padding: new EdgeInsets.all(0.0),
    children: <Widget>[
[...]

Hope this helps anyone stumbling upon this themselves.

CC BY-SA 3.0
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.