Flutter - Fix Drawer Header - dart

Question

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".

Answer 1

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
),
],
),
);
}

Answer 2

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
),
],
),
)
],
),
),
);
}

Answer 3

I use this code to pin DrawerHeader on top with fixed height and make list to fill rest of space below.
final drawer = Drawer(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(
height: 200,
child: DrawerHeader(
decoration: BoxDecoration(color: Colors.blue),
child: Text('Right Drawer Header',
style: TextStyle(color: Colors.white, fontSize: 24)))),
Expanded(
child: ListView(padding: EdgeInsets.zero, children: [
ListTile(leading: Icon(Icons.message), title: Text('Message')),
ListTile(
leading: Icon(Icons.account_circle), title: Text('Profile')),
ListTile(leading: Icon(Icons.settings), title: Text('Settings')),
]))
]));