Dialogs and Toasts
Flutter NavigationDrawer Tutorial and Example
Flutter Navigation Drawer Tutorial and Example
This is a flutter navigation drawer tutorial with a full example. We start by discussing what navigation drawer is, when to use then look at a full example with fragments containing gridviews.
What is a Navigation Drawer?
A NavigationDrawer is a widget that allows us render navigation items in a sidebar with an optional user account profile. Navigation Drawer usually renders items in a ListView or ExpandableList. It usually has a header where we can display user account details like name, email, profile avatar et.
When a single navigation drawer item is clicked you navigate to a page or what we are calling fragments in this case.
When to use NavigationDrawer
Use navigation drawer when you have more items than can fit comfortably in a tabbar or bottomnavigation. Or if you find navigation drawer more intuitive to use of course.
1. Flutter Navigation Drawer – Fragments with GridViews
We will explore an example where we will render a navigation drawer with header containing user name, email as well as avatar. We will show a user image as avatar. We will also show a navigation drawer background image.
Then when the user clicks a single navigation drawer item we will open an associated fragment or page. That fragment will contain gridviews with some data.
We have three files:
- Fragments.dart – To define our Fragment classes. These are just stateless widgets.
- Home.dart – This is our home page. It’s also where we define our navigation drawer.
- main.dart – The classic main file with our main method. Entry point to our application.
Download the source code here.