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
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,