Reputation: 43
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
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