Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter align button to bottom of Drawer

Tags:

flutter

dart

I'm trying to have a Widget align to the bottom of my NavDrawer while still keeping a DrawerHeader and a list at the top of the Drawer. Here's what I'm trying:

drawer: new Drawer(     child: new Column(       mainAxisSize: MainAxisSize.max,       children: <Widget>[         new Text('Top'),         new Align(           alignment: FractionalOffset.bottomCenter,           child: new Text('Bottom'),         ),       ],     ),   ), 

The bottom text should be aligned to the bottom of the drawer, but It isn't!

like image 392
Plays2 Avatar asked May 22 '18 15:05

Plays2


People also ask

How do you align the button to the bottom in flutter?

Flutter Bottom Button Using FloatingActionButton You can align FloatingActionButton position to center or almost anywhere using Scaffold's floatingActionButtonLocation property. Use FloatingActionButtonLocation. centerFloat to make FAB to align to bottom.

How do you align buttons in flutter?

How to create Flutter Align Widget. To create align widget you have to just wrap the child widget with the Align() class. For example, I want a TextButton to align to the center then I will wrap the button widget with the Align().


2 Answers

You need to wrap your Align widget in Expanded.

drawer: Drawer(   child: Column(     mainAxisSize: MainAxisSize.max,     children: <Widget>[       Text('Top'),       Expanded(         child: Align(           alignment: Alignment.bottomCenter,           child: Text('Bottom'),         ),       ),     ],   ), ), 
like image 77
Simon Avatar answered Sep 16 '22 23:09

Simon


Edit:

Years on and there's a much easier solution:

return Drawer(   child: Column(     children: [       ListView(), // <-- Whatever actual content you want goes here       Spacer(), // <-- This will fill up any free-space       // Everything from here down is bottom aligned in the drawer       Divider(),       ListTile(         title: Text('Settings'),         leading: Icon(Icons.settings),       ),       ListTile(         title: Text('Help and Feedback'),         leading: Icon(Icons.help),       ),     ] ); 

A little late to the party, but here's my solution to this problem:

  @override   Widget build(BuildContext context) {     return Drawer(       // column holds all the widgets in the drawer       child: Column(         children: <Widget>[           Expanded(             // ListView contains a group of widgets that scroll inside the drawer             child: ListView(               children: <Widget>[                 UserAccountsDrawerHeader(),                 Text('In list view'),                 Text('In list view too'),               ],             ),           ),           // This container holds the align           Container(               // This align moves the children to the bottom               child: Align(                   alignment: FractionalOffset.bottomCenter,                   // This container holds all the children that will be aligned                   // on the bottom and should not scroll with the above ListView                   child: Container(                       child: Column(                     children: <Widget>[                       Divider(),                       ListTile(                           leading: Icon(Icons.settings),                           title: Text('Settings')),                       ListTile(                           leading: Icon(Icons.help),                           title: Text('Help and Feedback'))                     ],                   )                 )               )             )         ],       ),     );   } 

This produces the below output where the UserAccountDrawerHeader and the text items can be scrolled around inside the drawer but the Divider and the two ListTiles stay static on the bottom of the drawer.

Output

like image 44
Samuel Huff Avatar answered Sep 19 '22 23:09

Samuel Huff