How to make navigation drawer appear bottom to app bar/ tool bar
1,074
You can either use ListView
for this, or a Column
with Padding
.
Update:
Using inbuilt Drawer
won't let you go there, you will have to create your own drawer. Something like this:
Row(
children: [
YourVerticalDrawer(), // give it a fixed width to make it look consistent
YourAppMainContent(),
]
)
Author by
kiran kumar
Updated on December 13, 2022Comments
-
kiran kumar over 1 year
I have implemented navigation drawer. The drawer covers the App Bar but what i need is it should not cover the app bar and navigation drawer should start from the bottom of the app bar. I have achieved bringing list tiles to the bottom but i need whole navigation drawer to be in bottom of the app bar/ toolbar
I have attached screenshot below for the reference
import 'package:flutter/material.dart'; import 'package:navigationdrawer/second_fragment.dart'; import 'package:navigationdrawer/third_fragment.dart'; import 'first_fragment.dart'; class DrawerItem { String title; IconData icon; DrawerItem(this.title, this.icon); } void main() => runApp(new HomePage()); class HomePage extends StatefulWidget { final drawerItems = [ new DrawerItem("Fragment 1", Icons.rss_feed), new DrawerItem("Fragment 2", Icons.local_pizza), new DrawerItem("Fragment 3", Icons.info) ]; @override State<StatefulWidget> createState() { return new HomePageState(); } } class HomePageState extends State<HomePage> { int _selectedDrawerIndex = 0; _getDrawerItemWidget(int pos) { switch (pos) { case 0: return new FirstFragment(); case 1: return new SecondFragment(); case 2: return new ThirdFragment(); default: return new Text("Error"); } } _onSelectItem(int index) { setState(() => _selectedDrawerIndex = index); Navigator.of(context).pop(); // close the drawer } @override Widget build(BuildContext context) { var drawerOptions = <Widget>[]; for (var i = 0; i < widget.drawerItems.length; i++) { var d = widget.drawerItems[i]; drawerOptions.add(new ListTile( leading: new Icon(d.icon), title: new Text(d.title), selected: i == _selectedDrawerIndex, onTap: () => _onSelectItem(i), )); } return new MaterialApp( theme: new ThemeData( primarySwatch: Colors.red, ), home: new Scaffold( appBar: new AppBar( title: new Text(widget.drawerItems[_selectedDrawerIndex].title), ), drawer: new Drawer( child: Container( child: new Column( children: <Widget>[ Column(children: drawerOptions) ], ), ), ), body: _getDrawerItemWidget(_selectedDrawerIndex), ), ); } }
-
kiran kumar almost 5 yearsIt only adds an extra space in the top of navigation drawer.
-
Doc over 4 yearsThe person downvoting should also mention the reason. This answer may not be the correct approach but does exactly what the OP wants.