Flutter Navigation Drawer in 5 Minutes

Flutter Navigation Drawer in 5 Minutes

Navigation Drawer or the Menu SlideBar is a very useful UX/UI component to any application. To create a Navigation Drawer in the native Android/Kotlin would take a lot of boilerplate code to be written. In Flutter, all it is going to take is 5 minutes of your time!

Navigation Drawer Provides quick menu options and other important information in any Application. These are persistent and will be available throughout the App. A great way to show details like UserName or Menu items etc. This article is going to share how to include that in your Flutter Application. A simple Widget is going to be introduced into the Scaffold Widget and Voila! Navigation Drawer is now live.

How to create a Drawer in Flutter?

Navigation Drawers in Flutter can be created using the Drawer() widget. The catch here is that there are very few Widgets that accept a Drawer widget. One important widget is the Scaffold widget in flutter. This will by default provides an option to include navigation drawer through the drawer attribute. The following section will show what and how to use the Drawer widget in the Scaffold layout.

Navigation Drawer Basics

Including the Drawer() widget in Scaffold’s ‘drawer’ is not going to do the trick. In fact, it will only create an empty slider. In order to fill up this slider with some data at least, we will have to see what are the attributes that the Drawer widget provides.

Sample usage of Drawer widget,

Scaffold(drawer: Drawer())

Attributes and Helper Widgets

Drawer Widget takes only 3 attributes to itself, they are

child – This attribute is the important attribute to show the Navigation Drawer to the user. It can take any widget as its value.  Pass any widget to this attribute and it will automatically place it in the Drawer. Some of the most used Widgets include ListView Widget, Image Widget, Text Widget!

elevation – Takes a double/float value, and denotes how much of Z-axis should be moved to provide a depth like an effect on it. Mostly advisable to keep this to 0 or default since otherwise, it will be too difficult in terms of user experience.

semanticLabel – Used primarily for accessibility purpose, takes in a String value.

Once these attributes are used, there is the question of what actually works with a Navigation Drawer widget. The Navigation Drawer widget can also be partitioned with other helper Widgets like DrawerHeader, ListTile Widgets, etc.

DrawerHeader Widget

The main purpose of the DrawerHeader widget is to actually be the Header for the Drawer Widget. It occupies the portion on the Top of the Slider and can be used to show lots of things.

Provides 2 important attributes, child and decoration. To know how we are using the DrawerHeader for the Navigation Sliding Drawer, check out the next section where the example application is run.

ListTile Widget

The ListTile widget provides a simple container that can be used to hold a Title, SubTitle. This is tweaked a bit for the Drawer purposes and can be easily used in Flutter’s Sliding Drawer. The next section contains the example application with ListTile widget involved.

To know more about how we can play around with ListTile widget, read the ListView Widget in Flutter. The article contains important information on ListTiles

Navigation Drawer Example Application

The below section will try to create a simple Application to show the use of the Drawer() widget in Flutter. It most importantly makes use of the Scaffold Widget.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  final appTitle = 'Androidmonks';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: appTitle,
      home: MyHomePage(title: appTitle),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final String title;

  MyHomePage({Key key, this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.orangeAccent,
      appBar: AppBar(title: Text("Sample Drawer"),backgroundColor: Colors.black87,),
      body: Column(
        children: <Widget>[
          Card(child:Image.network("https://s.tmimgcdn.com/blog/wp-content/uploads/2016/04/1-1.jpg?x62314"),),
          Card(child:Image.network("https://s.tmimgcdn.com/blog/wp-content/uploads/2016/04/3-9-1.jpg?x62314"),),
        ],

      ),
      drawer: Drawer(
          child: ListView(
            padding: EdgeInsets.all(0),
            children: <Widget>[
              DrawerHeader(
                child: Column(
                  children: <Widget>[
                    Text("JOHN DOE", style: TextStyle(color: Colors.white, fontSize: 30),),
                    Image.network("https://www.w3schools.com/w3css/img_avatar3.png", height: 100.0, width: 100.0,)
                  ],
                ),
                decoration: BoxDecoration(color: Colors.deepOrangeAccent),
              ),
              ListTile(
                title: Text("Sample Item 1", style: TextStyle(color: Colors.orangeAccent, fontSize: 16),),
                onTap: (){
                  
                    Navigator.pop(context);
                },
              ),
              ListTile(
                title: Text("Sample Item 2", style: TextStyle(color: Colors.orangeAccent, fontSize: 16),),
                onTap: (){
                  Navigator.pop(context);

                },
              )
            ],
          )
      ),
    );
  }
}

This will create an application that looks like,

Leave a Comment