Flutter – Side menu

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.

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.

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.

Screenshot_2018-05-30-01-37-12

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.

Nice. Now open up main.dart file and modify it as shown below.

Now you’ll see an option in the side menu as well.

Screenshot_2018-05-30-01-41-30

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.. :)

Liked it? Take a second to support admin on Patreon!