Dominik
Dominik

Reputation: 43

Extend Container to fill height of navigation drawer

I build a navigation drawer for my app and so far it works and looks as intended. Now I tried the Pixel 4 XL emulator and I noticed due to its height the design is not as intended.

https://i.sstatic.net/t8Lb6.png

  Widget build(BuildContext context) {
    return new Drawer(
        child: Container(
          color: Color(0xFFb69862),
          child: new ListView(
            children: <Widget>[
              new UserAccountsDrawerHeader(
                accountName: new Text("John Doe", style: TextStyle(fontSize: 16)),
                accountEmail: new Text("[email protected]"),
                decoration: new BoxDecoration(color: Color(0xFFb69862)),
                currentAccountPicture: CircleAvatar(backgroundImage: NetworkImage("https://randomuser.me/api/portraits/men/46.jpg")),
              ),
              // Menu Structure
              Column(
                children: <Widget>[
                  Container(
                    padding: EdgeInsets.only(top: 10),
                    color: Color(0xFF221f1c),
                    child: Column(
                      children: <Widget>[
                        new ListTile(
                          leading: new Icon(MdiIcons.history,color: Colors.white),
                          title: new Text("Deine Fahrten", style: new TextStyle(color: Colors.white),),
                          onTap: () {},
                        ),
                        new ListTile(
                          leading: new Icon(MdiIcons.carMultiple,color: Colors.white),
                          title: new Text("Flottenübersicht", style: new TextStyle(color: Colors.white),),
                          onTap: () {},
                        ),
                        new Divider(color: Colors.white),
                        new ListTile(
                          leading: new Icon(MdiIcons.account,color: Colors.white),
                          title: new Text("Konto", style: new TextStyle(color: Colors.white),),
                          onTap: () {},
                        ),
                        new ListTile(
                          leading: new Icon(MdiIcons.cash,color: Colors.white),
                          title: new Text("Bezahlung", style: new TextStyle(color: Colors.white),),
                          onTap: () {},
                        ),
                        new ListTile(
                          leading: new Icon(MdiIcons.settings,color: Colors.white),
                          title: new Text("Einstellungen", style: new TextStyle(color: Colors.white),),
                          onTap: () {},
                        ),
                        new Divider(color: Colors.white),
                        new ListTile(
                          leading: new Icon(MdiIcons.logout,color: Colors.white),
                          title: new Text("Abmelden", style: new TextStyle(color: Colors.white),),
                          onTap: () {},
                        ),              new Divider(color: Colors.white),
                        new ListTile(
                          leading: new Icon(MdiIcons.information,color: Colors.white),
                          title: new Text("Hilfe & Kontakt", style: new TextStyle(color: Colors.white),),
                          onTap: () {},
                        ),
                        new ListTile(
                          title: new Text("© GmbH", style: new TextStyle(color: Colors.white, fontSize: 9),),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ],
          ),
        )
    );
  }

Now I want that my Column under the UserAccountsDrawerHeader to expand to the buttom so it fills with the brown color. I am quite sure that I 've been missing something considering the fact that I have tried a lot of different things and nothing seems to work, often resulting in a completely empty navigation drawer.

Upvotes: 0

Views: 538

Answers (1)

Sagar Acharya
Sagar Acharya

Reputation: 3767

Just cheked you code maybe this code can work check out the change :

 // Menu Structure
                Column(
                  children: <Widget>[
                    Container(
                      height: MediaQuery.of(context).size.height,

just add the media query height to the container so that it will work on all devices as mentioned above let me know if it works.

Upvotes: 1

Related Questions