Android Sliding Menu using Navigation Drawer in Flutter[Tutorial+Example]

Introduction:

You might have noticed that a lot of android applications introduced a sliding panel menu to navigate between major modules of the application. In flutter, you can use the drawer widget to attain the navigation drawer with sliding menus. Most of the time Sliding Menu (Navigation Drawer) will be hidden and can be shown by swiping the screen from left edge to right or tapping the app icon on the app bar.

In this post, We are going to design and implement a navigation drawer using a drawer widget in a flutter to learn more about it you can view the below .

Demo:

The final result of the app

Prerequisites

This tutorial assumes a little knowledge of Flutter and its widget usages.

Visual Studio Code editor / Android studio installed on your machine if you haven’t yet. We’ll use it in our tutorial.

Project Setup:

Create a new flutter project with the name flutter_navigation_drawer. We are going to take an example from Gmail App for the navigation drawer.

Using Material Design, there are two primary options for navigation: tabs and drawers. When there is insufficient space to support tabs, drawers provide a handy alternative.

In Flutter, use the Drawer widget in combination with a Scaffold to create a layout with a Material Design drawer. This recipe uses the following steps:

Create a Scaffold.
Add a drawer.
Populate the drawer with items + close it.

1. Create a Scaffold

To add a drawer you need to wrap it in a Scaffold widget. you can view it in below example:


Scaffold(
  drawer: // Add a Drawer here in the next step.
);

2. Add a drawer

Next we are going to add the drawer widget to the scaffold. you can view it in below example:


Scaffold(
  drawer: Drawer(
    child: // Populate the Drawer in the next step.
  )
);

3. Update your main.dart

We are going to design a new widget for the drawer part. Create a file named maindrawer.dart inside lib directory and we going to look the example little later but before that we will try to update our main.dart file add the below code.


import 'package:flutter/material.dart';

import 'maindrawer.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        iconTheme: IconThemeData(
            color: Colors.black
        ),
        title: Text("Gmail",style: TextStyle(color: Colors.red,fontSize: 22.0),),
        backgroundColor: Colors.white,
      ),
      //Now we are going to open a new file
      // where we will create the layout of the Drawer
      drawer: Drawer(
        child: MainDrawer(),
      ),
    );
  }
}

3. Populate drawer with items

Before we populate with a list view we are going to add a container that will hold the text and the list view todo this we are going to add

crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
  Text(
    "Gmail",
      style:TextStyle(
          fontSize: 25.0,
          fontWeight: FontWeight.w500,
          color: Colors.red[300],
      ),
    //textAlign: TextAlign.left,
  ),

],

Add the list view by using the ListTile widget that will include the options like inbox.mail,snoozed etc and we are going to use the icon to add the icon and text to the list view as below

ListTile(
  onTap: (){},//add code to set state on click of the items
  leading: Icon(
    Icons.inbox, // add the icons to the ListTile
    color: Colors.black,
  ),
  trailing: Text( // trailling is addded to last part of the listview
    "99+"
  ),
  title:Text(
    "Inbox"
  ),

The Complete Code to populate the drawer with data . Add this code to the maindrawer.dart


import 'package:flutter/material.dart';

class MainDrawer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
          child: Padding(
            padding: EdgeInsets.only(top:50.0,left: 20.0),

            child: Column(
              //mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                Text(
                  "Gmail",
                    style:TextStyle(
                        fontSize: 25.0,
                        fontWeight: FontWeight.w500,
                        color: Colors.red[300],
                    ),
                  //textAlign: TextAlign.left,
                ),

              ],
            ),

          ),

        ),
        SizedBox(
          height: 20.0,
        ),
        ListTile(
          onTap: (){},
          leading: Icon(
            Icons.inbox,
            color: Colors.black,
          ),
          trailing: Text(
            "99+"
          ),
          title:Text(
            "Inbox"
          ),

        ),
        ListTile(
          onTap: (){},
          leading: Icon(
            Icons.star_border,
            color: Colors.black,
          ),
          title:Text(
              "Starred"
          ),

        ),
        ListTile(
          onTap: (){},
          leading: Icon(
            Icons.snooze,
            color: Colors.black,
          ),
          title:Text(
              "Snoozed"
          ),

        ),ListTile(
          onTap: (){},
          leading: Icon(
            Icons.label_important,
            color: Colors.black,
          ),
          title:Text(
              "Important"
          ),

        ),ListTile(
          onTap: (){},
          leading: Icon(
            Icons.inbox,
            color: Colors.black,
          ),
          title:Text(
              "draft"
          ),

        ),ListTile(
          onTap: (){},
          leading: Icon(
            Icons.inbox,
            color: Colors.black,
          ),
          title:Text(
              "sent"
          ),

        )
      ],
    );
  }
}

Conclusion:

We learned how to use the drawer widget within flutter and implement it within your app. we can improve this code by creating a function for the list and just using the reference to add the list items based on title and icons and parameters. We will code those in the next part when we implement the ontap() method till then Happy Coding :-)