How to Make Navigation Drawer in Flutter Source Code

Users may browse to various pages of your app using the Flutter navigation drawer. The Drawer widget is used to add the navigation drawer. It may be accessed by either using the swipe gesture or the menu icon in the app bar.

Introduction

You may customise the navigation drawer to open from the right side of the screen instead of the usual left side (for the LTR text settings). Swiping or clicking outside the drawer will close it. When it opens, the drawer takes up about 60–70% of the screen.

Here’s what we’ll cover:

• When to use a navigation drawer
• How to add a basic navigation drawer in Flutter
• Displaying user details in navigation drawer header
• Displaying AboutListTile
• Opening a navigation drawer programmatically
• Opening a navigation drawer from the right side
• Controlling navigation drawer width

How to add a basic navigation drawer in Flutter
To add a basic navigation drawer in Flutter, you must first use MaterialApp in your project. Then, the Drawer widget can be added to the Scaffold widget.

Configure flutter in your system first

Note: Before creating flutter project you need to configure Flutter in your system successfully . here i have given another articale to help in configuration of flutter in your system

How to Install Flutter in windows 10 step by step

Here are the step-by-step instructions:

• To assign the Drawer widget, add the Drawer property, then use the MaterialApp within the scaffold.
• Add the ListView widget as a child widget within the Drawer widget, and then insert the DrawerHeader widget inside the ListView. A material design drawer header will result from this.
• Insert a Text widget with some text within the DrawerHeader.
• Add a ListTile widget with a title and icon that represents a single page beneath the DrawerHeader.
• similar add more ListTile for further pages

Code example:

Splash Screen

Splash screen in flutter logo splash screen code

 Container(
        color: Colors.black,
        height: MediaQuery.of(context).size.height,
        width: MediaQuery.of(context).size.width,
        child: Image.asset(
          "assets/images/splash.png",
          fit: BoxFit.fill,
        ),
      ),

Splash Screen full source code

import 'dart:async';
import 'package:flutter/material.dart';
import '../page_routes/routes.dart';

class SplashScreen extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => InitState();
}

class InitState extends State<SplashScreen> {
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    startTimer();
  }

  startTimer() async {
    var duration = const Duration(seconds: 5);  // timer for splash screen
    return Timer(duration, homePageRoute);
  }

  homePageRoute() {
    // navigate here
    Navigator.pushNamed(context, Routes.homeScreen);
  }

  @override
  Widget build(BuildContext context) {
    return initWidget();
  }
  Widget initWidget() {
    return Scaffold(
      body: Container(
        color: Colors.black,
        height: MediaQuery.of(context).size.height,
        width: MediaQuery.of(context).size.width,
        child: Image.asset(
          "assets/images/splash.png",
          fit: BoxFit.fill,
        ),
      ),
    );
  }
}

Home Page

Open drawer use tooltip in home page code

 // open drawer use tooltip
              tooltip: MaterialLocalizations
                  .of(context)
                  .openAppDrawerTooltip,

Navigatate Drawer to menu bar screen

   drawer: MenuBarScreens(),

Home page Complete source code

import 'package:drawer/screens/menubar.dart';
import 'package:drawer/utils/colors.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);
  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    // final _scaffoldKey = GlobalKey<ScaffoldState>();

    return Scaffold(
       backgroundColor: colorWhite,
      resizeToAvoidBottomInset: false,
      appBar: AppBar(
        title: Container(
          // width: double.infinity,
          height: 40,
          decoration: BoxDecoration(
              color: Colors.white, borderRadius: BorderRadius.circular(5)),
          child: Center(
            child: TextField(
              onChanged: ((value) {}),
              decoration: InputDecoration(
                  suffixIcon: IconButton(
                    icon: Icon(Icons.search),
                     color: colorSecondry,
                    onPressed: () {},
                  ),
                  hintText: '  Search...',
                  hintStyle: TextStyle(
                    fontSize: 14,
                    fontFamily: 'Amazon',
                    // color: colorSecondry),
                  ),
                  border: InputBorder.none),
            ),
          ),
        ),

        //  title: Text('Search'),
        leading: Builder(
          builder: (BuildContext context) {
            return IconButton(
              icon: const Icon(Icons.line_weight_rounded),
              //icon: Image.asset('assets/images/navbar.png'), // for image
              onPressed: () {
                Scaffold.of(context).openDrawer();
              },
              // open drawer use tooltip
              tooltip: MaterialLocalizations
                  .of(context)
                  .openAppDrawerTooltip,
            );
          },
        ),
        automaticallyImplyLeading: false,
        actions: [
          Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              IconButton(
                onPressed: () {
                  //  Navigator.pushNamed(context, Routes.notifyScreen);
                },
                icon: const Icon(Icons.notifications_outlined),
              ),
            ],
          ),
        ],
        centerTitle: true,
        elevation: 10,
        backgroundColor: colorPrimary,
      ),
      // navigation drawer screen here
      drawer: MenuBarScreens(),
      body: Center(
        child: Column(
          children: [
            SizedBox(
              height: 250,
            ),
            Container(
              height: 100,
              width: 100,
              child: Image.asset(
                "assets/images/music.jpg",
              ),
            ),
            Text("Home Page", style: TextStyle(color: Colors.black, fontSize: 25),
            ),
          ],
        ),
      ),
    );
  }
}

Basic Navigation Drawer

Here’s how the code is translated into design: user information displayed in the navigation drawer header. In the straightforward example above, the drawer header is simply text, but in a real-world setting, you would wish to show the current user information there.

All user-related data, including the profile image, username, and email, is shown in the UserAccountsDrawerHeader. When users tap on the user information, you may also open the user details page. User information will be shown in the navigation drawer when:

Simply swap out the DrawerHeader widget with the UserAccountsDrawerHeader in the aforementioned sample code.
Set the username and include the accountName parameter
Set the user email and include the accountEmail parameter.
Set the logged-in user’s profile image by adding the currentAccountPicture option.

Basic Navigation Drawer Code

Output

Navigation Drawer Code

 Drawer(
      backgroundColor: colorPrimary,
      child: Padding(
        padding: const EdgeInsets.only(bottom: 12.0),
        child: ListView(
          padding: EdgeInsets.only(left: 1.0, right: 1.0),
          children: [
            Container(
              height: 120,
              child: DrawerHeader(
                child: Image.asset(
                  "assets/images/music.jpg",
                ),
              ),
            ),
            const Divider(
              color: Colors.grey,
              thickness: 1,
            ),
            ListTile(
              leading: const Icon(
                Icons.home,
                size: 18,
                color: Colors.white,
              ),
              title: const Text('HOME',
                  style: TextStyle(
                    color: Colors.white,
                    fontFamily: 'Amazon',
                  )),
              onTap: () {
                Navigator.pushNamed(context, Routes.homeScreen);
              },
            ),
            const Divider(
              color: Colors.grey,
              thickness: 1,
            ),
            ListTile(
              leading: const Icon(
                Icons.queue_music_outlined,
                size: 18,
                color: Colors.white,
              ),
              title: const Text('ALL SONGS',
                  style: TextStyle(
                    color: Colors.white,
                    fontFamily: 'Amazon',
                  )),
              onTap: () {
                //Navigator.pushNamed(context, Routes.homeScreen);
              },
            ),
            const Divider(
              color: Colors.grey,
              thickness: 1,
            ),
            ListTile(
              leading: const Icon(
                Icons.photo_album_outlined,
                size: 18,
                color: Colors.white,
              ),
              title: const Text('ALBUMS',
                  style: TextStyle(
                    color: Colors.white,
                    fontFamily: 'Amazon',
                  )),
              onTap: () {
                // Navigator.pushReplacementNamed(context, Routes.adsBoutiques);
              },
            ),
            const Divider(
              color: Colors.grey,
              thickness: 1,
            ),
            ListTile(
              leading: const Icon(
                Icons.library_music_sharp,
                size: 18,
                color: Colors.white,
              ),
              title: const Text('ARTISTS',
                  style: TextStyle(
                    color: Colors.white,
                    fontFamily: 'Amazon',
                  )),
              onTap: () {
                // Navigator.pushReplacementNamed(context, Routes.adsBoutiques);
              },
            ),
            const Divider(
              color: Colors.grey,
              thickness: 1,
            ),

            ListTile(
              leading: const Icon(
                Icons.settings_outlined,
                size: 18,
                color: Colors.white,
              ),
              title: const Text('SETTINGS',
                  style: TextStyle(
                    color: Colors.white,
                    fontFamily: 'Amazon',
                  )),
              onTap: () {
                // Navigator.pushReplacementNamed(context, Routes.adsBoutiques);
              },
            ),
            const Divider(
              color: Colors.grey,
              thickness: 1,
            ),
            ListTile(
              leading: const Icon(
                Icons.logout_sharp,
                size: 18,
                color: Colors.white,
              ),
              title: const Text('LOGIN',
                  style: TextStyle(
                    color: Colors.white,
                    fontFamily: 'Amazon',
                  )),
              onTap: () {
               // Navigator.pushReplacementNamed(context, Routes.loginallTab);
              },
            ),
          ],
        ),
      ),
    );
 

Navigation Drawer Complete Code

import 'package:drawer/utils/colors.dart';
import 'package:flutter/material.dart';
import 'package:flutter/src/foundation/key.dart';
import 'package:flutter/src/widgets/framework.dart';
import '../../page_routes/routes.dart';


class MenuBarScreens extends StatelessWidget {
  const MenuBarScreens({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Drawer(
      backgroundColor: colorPrimary,
      child: Padding(
        padding: const EdgeInsets.only(bottom: 12.0),
        child: ListView(
          padding: EdgeInsets.only(left: 1.0, right: 1.0),
          children: [
            Container(
              height: 120,
              child: DrawerHeader(
                child: Image.asset(
                  "assets/images/music.jpg",
                ),
              ),
            ),
            const Divider(
              color: Colors.grey,
              thickness: 1,
            ),
            ListTile(
              leading: const Icon(
                Icons.home,
                size: 18,
                color: Colors.white,
              ),
              title: const Text('HOME',
                  style: TextStyle(
                    color: Colors.white,
                    fontFamily: 'Amazon',
                  )),
              onTap: () {
                Navigator.pushNamed(context, Routes.homeScreen);
              },
            ),
            const Divider(
              color: Colors.grey,
              thickness: 1,
            ),
            ListTile(
              leading: const Icon(
                Icons.queue_music_outlined,
                size: 18,
                color: Colors.white,
              ),
              title: const Text('ALL SONGS',
                  style: TextStyle(
                    color: Colors.white,
                    fontFamily: 'Amazon',
                  )),
              onTap: () {
                //Navigator.pushNamed(context, Routes.homeScreen);
              },
            ),
            const Divider(
              color: Colors.grey,
              thickness: 1,
            ),
            ListTile(
              leading: const Icon(
                Icons.photo_album_outlined,
                size: 18,
                color: Colors.white,
              ),
              title: const Text('ALBUMS',
                  style: TextStyle(
                    color: Colors.white,
                    fontFamily: 'Amazon',
                  )),
              onTap: () {
                // Navigator.pushReplacementNamed(context, Routes.adsBoutiques);
              },
            ),
            const Divider(
              color: Colors.grey,
              thickness: 1,
            ),
            ListTile(
              leading: const Icon(
                Icons.library_music_sharp,
                size: 18,
                color: Colors.white,
              ),
              title: const Text('ARTISTS',
                  style: TextStyle(
                    color: Colors.white,
                    fontFamily: 'Amazon',
                  )),
              onTap: () {
                // Navigator.pushReplacementNamed(context, Routes.adsBoutiques);
              },
            ),
            const Divider(
              color: Colors.grey,
              thickness: 1,
            ),

            ListTile(
              leading: const Icon(
                Icons.settings_outlined,
                size: 18,
                color: Colors.white,
              ),
              title: const Text('SETTINGS',
                  style: TextStyle(
                    color: Colors.white,
                    fontFamily: 'Amazon',
                  )),
              onTap: () {
                // Navigator.pushReplacementNamed(context, Routes.adsBoutiques);
              },
            ),
            const Divider(
              color: Colors.grey,
              thickness: 1,
            ),
            ListTile(
              leading: const Icon(
                Icons.logout_sharp,
                size: 18,
                color: Colors.white,
              ),
              title: const Text('LOGIN',
                  style: TextStyle(
                    color: Colors.white,
                    fontFamily: 'Amazon',
                  )),
              onTap: () {
               // Navigator.pushReplacementNamed(context, Routes.loginallTab);
              },
            ),
          ],
        ),
      ),
    );
  }
}

Note: Use this drawer code in home page navigation

Displaying AboutListTile

Opening navigation drawer programmatically
Sometimes, you may also want to open or close the drawer programmatically. For example, if you are developing an onboarding feature or letting the user know how to navigate your app, you may want to open the navigation drawer when the user clicks on UI elements that are part of the onboarding feature, such as the next button, open button, etc.

     ListTile(
              leading: const Icon(
                Icons.settings_outlined,
                size: 18,
                color: Colors.white,
              ),

To open the navigation drawer programmatically:

First, create the global variable in your class
Inside the Scaffold widget, add the key parameter and assign the global key
Add the ElevatedButton to your page
Inside the ElevatedButton, add the onPressed() method and call the openDrawer() method using the Global key

Opening Drawer Programmatically

Opening a navigation drawer from the right side and left side both
In very rare cases, you may want to open the drawer from the right side. To do so, simply replace the drawer parameter (inside the Scaffold) with the endDrawer and you are done.

Home page : Controlling navigation drawer width When the navigation drawer opens, by default, it will cover more than 50 percent of the screen. You can change this and allow the navigation drawer to occupy a space that you define.

Conclusion

In this tutorial, we learned how to add the navigation drawer in Flutter with practical examples. We first saw how to add a basic navigation drawer and then gradually moved toward customizing the drawer. Finally, we learned how to open the navigation drawer programmatically and control its width.

You can check out the entire code of this here:

Get Full Source Code

Contact me

for backend or any other configuration feel free to contact me.

Do like & share my Facebook page. if you find this post helpful. Thank you!!

How to Create Login Page UI Design and Animation For Flutter

Related Articles:

• How to Install Flutter in windows 10
• How to Setup Space Between Elements In Flutter 
• Flutter Card Widget with Example
• Integrating an API into a Flutter – Working with REST APIs
• Create a simple splash screen in Flutter
• Android Projects with Source Code
• Flutter Interview Questions
• School Database Management System Project 
• Create A Simple Splash Screen UI design
• Create Login Page UI Design and Animation For Flutter
• Setting Page Flutter UI Design with source code

READ MORE