Following this link Add a Drawer to a screen I have created a drawer.
Following is my piece of code:
// FUNCTION CONTAINING LEFT SIDE MENU ITEMS
_drawerList() {
return Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
DrawerHeader(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'John Doe',
),
],
),
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/images/menu_bg.png'),
fit: BoxFit.cover,
),
),
),
ListTile(
// Some Code
),
],
),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
// Some Code
drawer: Drawer(
child: _drawerList(),
),
// Some Code
}
}
Is there any way I can fix "DrawerHeader" so that it doesn't move with the drawer and list view.
P.S. I don't want to hold ListView. I just want to hold or fix "DrawerHeader".
Instead of wrapping inside ListView you can wrap it inside column and then add other widget inside that. Also if you want to divide header and other part in any ratio you can use Expanded widget. Save this answer.
DrawerHeader class Null safety. The top-most region of a Material Design drawer. The header's child widget, if any, is placed inside a Container whose decoration can be passed as an argument, inset by the given padding. Part of the Material Design Drawer. Requires one of its ancestors to be a Material widget.
Yes, move it out of the ListView widget and use Column to hold both DrawerHeader and ListView.
With items scrolling enabled
_drawerList() {
return Drawer(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
DrawerHeader(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'John Doe',
),
],
),
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/images/menu_bg.png'),
fit: BoxFit.cover,
),
),
),
ListView(
padding: EdgeInsets.zero,
children: <Widget>[
ListTile(
// Some Code
),
ListTile(
// Some Code
),
ListTile(
// Some Code
),
ListTile(
// Some Code
),
ListTile(
// Some Code
),
],
),
],
),
);
}
With items scrolling disabled
_drawerList() {
return Drawer(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
DrawerHeader(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'John Doe',
),
],
),
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/images/menu_bg.png'),
fit: BoxFit.cover,
),
),
),
ListTile(
// Some Code
),
ListTile(
// Some Code
),
ListTile(
// Some Code
),
ListTile(
// Some Code
),
ListTile(
// Some Code
),
],
),
);
}
Instead of wrapping inside ListView you can wrap it inside column and then add other widget inside that. Also if you want to divide header and other part in any ratio you can use Expanded widget.
_drawerList() {
return Drawer(
child: Container(
child: Column(
children: <Widget>[
Expanded(
flex: 1,
child: DrawerHeader(
padding: EdgeInsets.all(0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'John Doe',
),
],
),
),
),
Expanded(
flex: 2,
child: ListView(
scrollDirection: Axis.vertical,
children: <Widget>[
ListTile(
title: Text("Ses"),
// Some Code
),
ListTile(
title: Text("Ses"),
// Some Code
),
ListTile(
title: Text("Ses"),
// Some Code
),
ListTile(
title: Text("Ses"),
// Some Code
),
ListTile(
title: Text("Ses"),
// Some Code
),
ListTile(
title: Text("Ses"),
// Some Code
),
ListTile(
title: Text("Ses"),
// Some Code
),
ListTile(
title: Text("Ses"),
// Some Code
),
],
),
)
],
),
),
);
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With