fix Flutter drawer items

Question

I'm trying to have a footer Widget align to the bottom of the Drawer but still not working Drawer Header and a list at the top of the Drawer. Here's what I'm trying:

//drawer class 
 class _NavigationDrawer extends State<NavigationDrawer> {
 @override
 Widget build(BuildContext context) {
 return Drawer(
 backgroundColor: Colors.white,
 child: SingleChildScrollView(
 child: Column(
 crossAxisAlignment: CrossAxisAlignment.stretch,
 children: <Widget>[
 buildHeader(context),
 buildMenuItem(context),
 buildFooter(context),
 ],
 ),
 ),
 );
 }

//header function
 Widget buildHeader(BuildContext context) => Material(
 color: Colors.white,
 child: InkWell(
 onTap: () {},
 child: Container(
 padding: EdgeInsets.only(
 top: MediaQuery.of(context).padding.top + 24,
 bottom: 24,
 ),
 child: Column(
 children: [
 Center(
 child: Image.asset(
 'assets/img/logo.png',
 width: MediaQuery.of(context).size.width * 0.5,
 height: MediaQuery.of(context).size.width * 0.2,
 ),
 )
 ],
 ),
 ),
 ),
 );

//body function
Widget buildMenuItem(BuildContext context) => Container(
 padding: EdgeInsets.all(24),
 color: Colors.red,
 child: Column(
 children: <Widget>[
 ListTile(
 leading: Icon(Icons.home),
 title: Text('Home'),
 onTap: () {
 Navigator.of(context).pushReplacement(MaterialPageRoute(
 //push
 builder: (context) => HomeScreen(),
 ));
 },
 ),
 ListTile(
 leading: Icon(Icons.person_2),
 title: Text('Profile'),
 onTap: () {},
 ),
 ListTile(
 leading: Icon(Icons.home_work_rounded),
 title: Text('Exwor'),
 onTap: () {},
 ),
 // const Divider(color: Colors.black),
 ListTile(
 leading: Icon(Icons.help),
 title: Text('help'),
 onTap: () {},
 ),
 ListTile(
 title: Text(
 "Logout",
 ),
 leading: Icon(
 Icons.logout_outlined,
 ),
 onTap: () {},
 ),
 ],
 ),
 );

//footer function
Widget buildFooter(BuildContext context) => Container(
 color: Colors.green,
 alignment: Alignment.bottomCenter,
 // margin: EdgeInsets.only(top: 100),
 child: Align(
 alignment: FractionalOffset.bottomCenter,
 child: Column(
 children: <Widget>[
 Text("Developed by .."),
 Text(
 "Version 1.0.0",
 style: TextStyle(
 fontSize: 11,
 color: Colors.black,
 fontWeight: FontWeight.bold),
 )
 ],
 )),
 );

image : DRAWE

the green container (buildfooter) should be aligned to the bottom of the drawer,how can i fix that?please help me to find solution

Answer 1

The SingleChildScrollView you use in the drawer is causing this.You may try remove it and write the drawer widget like this.

class _NavigationDrawer extends State<NavigationDrawer> {
 @override
 Widget build(BuildContext context) {
 return Drawer(
 backgroundColor: Colors.white,
 //remove SingleChildScrollView
 child: Column(
 crossAxisAlignment: CrossAxisAlignment.stretch,
 children: <Widget>[
 buildHeader(context),
 Expanded(child: buildMenuItem(context)), // This will take remaining space
 buildFooter(context),
 ],
 ),
 );
 }
}

if its still not look like you want , you may try add to column

mainAxisAlignment: MainAxisAlignment.spaceBetween,

Answer 2

Wrap buildMenuItem with Expanded -> SingleChildScrollView like below.

 Drawer(
 backgroundColor: Colors.white,
 child: Column(
 mainAxisAlignment: MainAxisAlignment.spaceBetween,
 children: <Widget>[
 buildHeader(context),
 Expanded(
 child: SingleChildScrollView(child: buildMenuItem(context))),
 buildFooter(context),
 ],
 ))

Answer 3

The simplest solution to this is remove SingleChildScrollView and add Expanded widget to buildmenuitem just that's it.