Flutter Drawer Widget Implementation : 4 Steps Only

Without navigation between screens, any flutter app cannot be real. There are many ways you can navigate in flutter like upper tabbar, drawer, lower tab bar e.t.c. The Flutter Drawer navigation widget is used when you have fewer options for navigation. In this entire tutorial, you will learn how to build a full flutter Drawer widget.

Steps to implement Flutter Drawer

In this section, you will learn all the steps required to build a Drawer in the flutter app.

Step 1: Define the Flutter Drawer Items

Let’s define a class that will define the drawer items. It will have an itemName of string type and an icon of IconData type to show the icon before the itemName.

import 'package:flutter/material.dart';

class DrawerItems {
  final String itemName;
  final IconData icon;

  DrawerItems({@required this.itemName, @required this.icon});

}

Here I have defined a class DrawerItem with itemName and icon as an attribute and define the constructor to access the attributes outside the class.

Step 2: Create a MyDrawer widget

Now in the second step, I will create a stateless widget MyDrawer. It contains all the drawer parts like DrawerHeader, Drawer items e.t.c. Inside the build() method I have defined the DrawerItems using the DrawerItems() constructor defined in step 1.

List items =[
      DrawerItems(itemName: "Home", icon: Icons.home),
      DrawerItems(itemName: "Setting", icon: Icons.settings),
      DrawerItems(itemName: "About", icon: Icons.info_outline),
    ];

The build() method will return a Drawer widget with all the things included in it, drawer header, drawer items in the ListTile. Below is the complete code for the MyDrawer Widget.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_drawer/drawer_items.dart';
class MyDrawer extends StatelessWidget {
  const MyDrawer({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    List items =[
      DrawerItems(itemName: "Home", icon: Icons.home),
      DrawerItems(itemName: "Setting", icon: Icons.settings),
      DrawerItems(itemName: "About", icon: Icons.info_outline),
    ];
    return Drawer(
      child: ListView(
        children: [
          DrawerHeader(
            decoration: BoxDecoration(
              color: Colors.red,
            ),
            child: ListTile(
              title: Text("Drawer Header",style: TextStyle(color: Colors.white),),
              subtitle: Text("Hello",style: TextStyle(color: Colors.white),),
              leading: CircleAvatar(
                child: Icon(Icons.perm_identity_outlined),
                backgroundColor: Colors.white,
              ),
              ),
            ),
          Column(
            children:
              items.map((item) => ListTile(
                title: Text(item.itemName),
                leading: Icon(item.icon),
                onTap: () {
                  Navigator.pop(context);
                },
              )).toList(),

          )
        ],
      ),
    ) ;
  }
}

Step 3: Create a Home Screen

After the creation of the MyDrawer widget let’s create a stateful widget with the name Home. The build method of this class will return a Scaffold() widget with the AppBar and the drawer widget. For the sake of simplicity inside the body, there is a single word text “Hello“.

Below is the complete code for the Home Screen

import 'package:flutter/material.dart';
import 'package:flutter_drawer/my_drawer.dart';
class Home extends StatefulWidget {
  const Home({Key key}) : super(key: key);

  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Drawer App"),backgroundColor: Colors.red,),
      drawer: MyDrawer(),
      body: Center(child: Text("Hello"),) ,
    );
  }
}

Step 4: Run the app

Now the last part is to run the app. There is a main.dart file for it that includes main() function and inside it the name of the app I want to run. Here also I have created a stateful widget and inside the build() method I am returning MaterialApp with the title and home widget. The home widget will be the Home Screen defined in Step 4.

When you then run the main.dart file then you will get the Nice Flutter Drawer.

Conclusion

Flutter Drawer is mostly used when you want the user to navigate to other screens. You can think of it as an admin dashboard for the app. These are the steps to use the Flutter drawer in the app. I hope you have understood. Even if you have any queries then you can contact us for more help.