Flutter Widgets → Flutter NavigationDrawer Tutorial and Example – Camposha

Flutter Widgets

Flutter Widgets

Flutter Widgets

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.

Full Examples

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.


Flutter NavigationDrawer
Flutter NavigationDrawer

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:

  1. Fragments.dart – To define our Fragment classes. These are just stateless widgets.
  2. Home.dart – This is our home page. It’s also where we define our navigation drawer.
  3. main.dart – The classic main file with our main method. Entry point to our application.
(a). Fragments.dart
(b). Home.dart
(c). main.dart

Download the source code here.

Leave a Reply

Your email address will not be published. Required fields are marked *