Flutter Scrollable navigation drawer with one menu item aligned to the bottom - flutter

Question

I have a navigation drawer with a bunch of items and I want the logout item aligned to the very bottom of the drawer.
return Drawer(
child: Column(
children: [
DrawerAccountHeader(UserType.worker),
DrawerNavigationItem(
"Home",
Icons.home,
),
new ListTile(
title: new Text('Jobs', style: TextStyle(color: Colors.black54),),
dense: true,
),
DrawerNavigationItem(
"Nearby",
Icons.location_on,
),
DrawerNavigationItem(
"Applied",
Icons.check_circle_outline,
),
DrawerNavigationItem(
"Hired",
Icons.check_circle,
),
Expanded(child: Container()),
Divider(),
DrawerNavigationItem(
"Logout",
Icons.exit_to_app,
)
],
),
);
But on smaller screen I get overflow error because that topmost column height is bigger than screen height. So I tried changing the column to a ListBox and then I get an exception "Vertical viewport was given unbounded height", because I have the Expanded() in between the items to make that gap so that Login buttons sticks to the bottom of the list.
Is there any way to achieve below?
Have the login button (and possibly a group of buttons) stick to the bottom of the screen when there's vertical space.
Make the drawer item scrollable when there's not enough vertical space.
(nice to have) The scrollable, the entire drawer can be scrolled. I.e. on a small screen the user will need to scroll the drawer to get to the logout option.

Answer 1

Try this,
Drawer(
child: LayoutBuilder(
builder: (context, constraint) {
return SingleChildScrollView(
child: ConstrainedBox(
constraints: BoxConstraints(minHeight: constraint.maxHeight),
child: IntrinsicHeight(
child: Column(
children: <Widget>[
DrawerHeader(
margin: EdgeInsets.all(0.0),
child: Center(
child: Text("Header"),
),
),
ListTile(
leading: Icon(Icons.home),
title: Text("Home"),
onTap: () {},
),
new ListTile(
title: new Text(
'Jobs',
style: TextStyle(color: Colors.black54),
),
dense: true,
),
ListTile(
leading: Icon(Icons.location_on),
title: Text("Nearby"),
onTap: () {},
),
ListTile(
leading: Icon(Icons.check_circle_outline),
title: Text("Applied"),
onTap: () {},
),
ListTile(
leading: Icon(Icons.check_circle),
title: Text("Hired"),
onTap: () {},
),
const Expanded(child: SizedBox()),
const Divider(height: 1.0, color: Colors.grey),
ListTile(
leading: Icon(Icons.exit_to_app),
title: Text("Logout"),
onTap: () {},
)
],
),
),
),
);
},
),
)

Answer 2

Use the Align widget to position bottom
Align(
alignment: Alignment.bottomCenter, //you can set it as per your requirement
child: Container(
child: Image.asset(
"assets/drawerCycleImage.png", //or Text widget or More Any
)),

Answer 3

#override
Widget build(BuildContext context) {
return Scaffold(
appBar:AppBar(
title:Text('Title')),
drawer:Drawer(
child:Stack(
children:[
ListView(
shrinkWrap:true,
children: List.generate(25,(ind){
//SizedBox is to remain space for logout button !
return ind==25 ?
SizedBox(height:60)
: ListTile(title:Text('Item $ind'));
})
),
Align(
alignment:Alignment.bottomCenter,
child: Container(
height:60,
color:Colors.black,
child: ListTile(
leading:Icon(Icons.exit_to_app),
title:Text('Logout')
),
),
)
]
)
),
body: Container(
alignment:Alignment.center,
child: Text('Hello !')
),
);
}