Drawer in flutter is a hidden screen which open from left or right side. The Navigation drawer in flutter contains the link of pages and header. Generally an icon and label name is used to show the number of navigation drawer menu in flutter.

How To Create Navigation Drawer in Flutter

Material design library provide the way of creating the Drawer in flutter. Import the material design library for this in the desired class.

Create Drawer Items Class

Create the number of Drawer Classes which you want to load after clicking on the navigation item from sidebar. I create following three classes. Create your own classes.

• HomeFragment()
• ChatFragment()
• StatusFragment()

I named these classes using fragment just for simply understanding. In android fragments loads inside the ViewPager. So you can understand according to that process.

Drawer Items

Create a class for drawer items. We created an icon and name of the drawer item.

class DrawerItem {
  String title;
  IconData icon;
  DrawerItem(this.title, this.icon);
}

List of Classes

Create a list of all your classes like fragment. create an a list of all the screen which you want to load.

final _draweItems = [
  new DrawerItem("Home ", Icons.home),
  new DrawerItem("Chat", Icons.messenger),
  new DrawerItem("Setting", Icons.settings_outlined)
];

Load The Particular Index Screen

Use switch cases to load the screens by passing the index number. Create all the screens here which all you want to load.

int _selectedIndex = 0;

_getDrawerItemWidget(int pos) {
  switch (pos) {
    case 0:
      return new HomeFragment();
    case 1:
      return new ChatFragment();
    case 2:
      return new StatusFragment();

    default:
      return new Text("Error While");
  }
}

Loading Screens on Drawer Item Click in Flutter

We will load the screen on the drawer item click. On the particular item click we will pass the index number to the following method which will call that screen. Closing the drawer after tapping.

_onSelectItem(int index) {
  setState(() => _selectedIndex = index);

  Navigator.of(context).pop(); // close the drawer
}

How To Return The Main Screen On BackPress in Drawer Flutter

Absolutely we want to return to the HomeFragment if we clicked on the other item from the sidebar. To achieve this we will use the onWillPop() method. This method redirect to the HomeFragment if we press back button in android.

Complete Drawer Class

Copy and paste following code for create a drawer in your project. This is simple and clean code for drawer.

import 'package:flutter/material.dart';
import 'package:ecommerce_app/BottomFragments/ChatFragment.dart';
import 'package:ecommerce_app/BottomFragments/StatusFragment.dart';
import 'package:ecommerce_app/Fragment/HomeFragment.dart';
import 'package:flutter/cupertino.dart';


class DrawerItem {
  String title;
  IconData icon;
  DrawerItem(this.title, this.icon);
}

class DrawerActivity extends StatefulWidget {
  final _draweItems = [
    new DrawerItem("Home ", Icons.home),
    new DrawerItem("Chat", Icons.messenger),
    new DrawerItem("Setting", Icons.settings_outlined)
  ];

  @override
  State<StatefulWidget> createState() {
    return new DrawerActivityState();
  }
}

class DrawerActivityState extends State<DrawerActivity> {
  int _selectedIndex = 0;

  String picsUrl =
      "https://previews.123rf.com/images/pandavector/pandavector1901/pandavector190105561/126045782-vector-illustration-of-avatar-and-dummy-sign-collection-of-avatar-and-image-stock-symbol-for-web-.jpg";

  _getDrawerItemWidget(int pos) {
    switch (pos) {
      case 0:
        return new HomeFragment();
      case 1:
        return new ChatFragment();
      case 2:
        return new StatusFragment();

      default:
        return new Text("Error While");
    }
  }

  _onSelectItem(int index) {
    setState(() => _selectedIndex = index);

    Navigator.of(context).pop(); // close the drawer
  }

  @override
  Widget build(BuildContext context) {
    List<Widget> drawerOpts = [];
    for (var i = 0; i < widget._draweItems.length; i++) {
      var d = widget._draweItems[i];
      drawerOpts.add(new ListTile(
        leading: new Icon(d.icon),
        title: new Text(d.title),
        selected: i == _selectedIndex,
        onTap: () => _onSelectItem(i),
      ));
    }

    return Scaffold(
      appBar: new AppBar(
        title: new Text(widget._draweItems[_selectedIndex].title),
      ),
      drawer: new Drawer(
        child: new Column(
          children: <Widget>[
            UserAccountsDrawerHeader(
              accountEmail: new Text("[email protected]", style: TextStyle(fontSize: 18),),
              accountName: new Text("Your Name", style: TextStyle(fontSize: 16),),
              currentAccountPicture: new GestureDetector(
                child: new CircleAvatar(
                  backgroundImage: new NetworkImage(picsUrl),
                ),
                onTap: () => print("This is your current account."),
              ),
            ),
            Column(children: drawerOpts)
          ],
        ),
      ),
      body: _getDrawerItemWidget(_selectedIndex),
    );
  }
}

We successfully created drawer with the simple code. You can manage all the screens according to you.

Result

Following is the result of the above tutorial code.

Thank you for visiting the page on fluttertpoint. Comment for any doubt and issue we will solve you shortly