Hi Friends,
Hope you are all well, In this post let’s see how to bring in side-menu/hamburger menu/navigation-drawer/hidden-drawer menu in your flutter apps.
To learn basics of flutter get my course at a discounted price – here.
Other courses on flutter – here. (Affliate link – keeps my site alive by helping me pay for hosting)
Let’s begin.
A screencast of this post.
As usual create a flutter app and then open main.dart file. Modify it as shown below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
import 'package:flutter/material.dart'; void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return new MaterialApp( home: new MyHomePage(), ); } } class MyHomePage extends StatefulWidget { @override _MyHomePageState createState() => new _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar(title: new Text('Sidemenu')), ), ); } } |
Run the app. You’ll just see an app with a blank appBar. Alright now let’s bring in a side menu and we’ll also add a part to the side menu where we’ll be showing the user display picture, user name and his email.
Modify main.dart file as shown below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
import 'package:flutter/material.dart'; void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return new MaterialApp( home: new MyHomePage(), ); } } class MyHomePage extends StatefulWidget { @override _MyHomePageState createState() => new _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar(title: new Text('Sidemenu')), drawer: new Drawer( child: ListView( children: <Widget>[ new UserAccountsDrawerHeader( accountName: new Text('Raja'), accountEmail: new Text('testemail@test.com'), currentAccountPicture: new CircleAvatar( backgroundImage: new NetworkImage('http://i.pravatar.cc/300'), ), ), ], ), ), ); } } |
This will add a hamburger menu button to the header. Tap on it and you will see a nice side menu on the app. It’ll be having the top useraccountheader as well.
Nice right ? Now, let’s see how to bring in some pages in our app and navigate to them from this menu.
Create a new file in lib directory called about.dart and add the below code into it.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
import 'package:flutter/material.dart'; class AboutPage extends StatefulWidget { @override _AboutPageState createState() => new _AboutPageState(); } class _AboutPageState extends State<AboutPage> { @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text('About Page'), ), ); } } |
Nice. Now open up main.dart file and modify it as shown below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
import 'package:flutter/material.dart'; //Pages import './about.dart'; void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return new MaterialApp( home: new MyHomePage(), ); } } class MyHomePage extends StatefulWidget { @override _MyHomePageState createState() => new _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar(title: new Text('Sidemenu')), drawer: new Drawer( child: ListView( children: <Widget>[ new UserAccountsDrawerHeader( accountName: new Text('Raja'), accountEmail: new Text('testemail@test.com'), currentAccountPicture: new CircleAvatar( backgroundImage: new NetworkImage('http://i.pravatar.cc/300'), ), ), new ListTile( title: new Text('About Page'), onTap: () { Navigator.of(context).pop(); Navigator.push( context, new MaterialPageRoute( builder: (BuildContext context) => new AboutPage())); }, ), ], ), ), ); } } |
Now you’ll see an option in the side menu as well.
Try tapping on it and whoa, you’ll now be navigated to the About Page.
This is how you could bring in a navigation drawer in your apps to navigate between pages.
Hope this helped you guys. If you found this helpful, kindly share it with someone and help them too.
Join our community – here.
Thanks for reading. Peace.. 
