App Drawer Flutter in 2023 | Drawer Widget Made Easy!

The app drawer flutter widget is used to give users access to the various locations and features that your application offers. On the top of the scaffold, three horizontal, parallel lines serve as its representation. The flutter app’s link to various routes is navigated by a horizontal movement that starts at the edge of the scaffold.

You must import the material component package, which is “package: flutter/material.dart,” in order to use the app drawer.

People, who read this article also read: Flutter Liquid Swipe Animation

The three sections of the navigating App Drawer Flutter are the header, body, and footer. The concept revolves around having a navigator with a few items as the drawer’s children that will be guided to various locations upon being tapped. Normally, ListView contains all of a Drawer widget’s children, and at first, only the DrawerHeader, which expands horizontally when clicked, is visible in the user interface.



Drawer({Key key, double elevation: 16.0, Widget child, String semanticLabel}) 

App Drawer Flutter Properties

  • semanticLabel: When the drawer is opened and closed, accessibility frameworks will announce screen transitions using the semantic label of the dialogue.
  • child: Those tree widgets are below this one.
  • key: Specifies how a widget in the tree can swap places with another widget.
  • runtimeType: A picture of the object’s runtime type.
  • elevation: The z-coordinate that should be used to position this drawer in relation to its parent.
  • hashCode: The object’s hash code.

Important Function

build(BuildContext context) → Widget: 

The widget-rendered portion of the user interface is specified by this method. When the Drawer widget is added to the tree in a specific BuildContext and when the Drawer widget’s dependencies change, this method is called.


Widget build(BuildContext context) {
  String? label = semanticLabel;
  switch (Theme.of(context).platform) {
    case TargetPlatform.iOS:
    case TargetPlatform.macOS:
    case TargetPlatform.fuchsia:
    case TargetPlatform.linux:
      label = semanticLabel ?? MaterialLocalizations.of(context).drawerLabel;
  return Semantics(
    scopesRoute: true,
    namesRoute: true,
    explicitChildNodes: true,
    label: label,
    child: ConstrainedBox(
      constraints: const BoxConstraints.expand(width: _kWidth),
      child: Material(
        elevation: elevation,
        child: child,

Why App Drawer Flutter?

Drawers come in very handy for balancing multiple mobile application functionalities at once and are very simple to implement. Especially in the case of a complex application with many screens, creating a drawer greatly simplifies and manages to visit various locations in your app.

The process of performing tasks and switching between screens is simple. 

Steps to Create an App Drawer Flutter

There are 4 quick steps to setting up a drawer

1. Make a flutter project: 

Go to the location where you want to create your project by opening the terminal and navigating there. Your flutter project is created when you use the command “flutter create project_name”. 

 flutter create file_name 

2. Create a scaffold widget: 

Your stateless/stateful widget should return a scaffold widget inside the MyApp Class. Implementing the fundamental visual layout structure of the flutter app is made possible by a scaffold widget. 


3. Add an App Drawer Flutter inside the scaffold:  

Choose a Drawer with a ListView as its child for the scaffold’s drawer property, or you can add a Container with a ListView as its child. There are desired items in various ListViews that needed to be displayed inside the drawer.

drawer: Drawer(

4. Add a closing functionality: 

The app drawer flutter has a closing functionality. It is implemented using Navigator when the user wants to do so after tapping on a particular item. A Navigator State can be used for this. 


Various Styles Of Navigation App Drawer Flutter

People, who read this article also read: Flutter SDK Installation on Windows, macOS, Linux

Three categories can be found in an app drawer:

  1. Modal Navigation App Drawer Flutter: These drawers only let the user interact with the drawer and prevent user interaction with the rest of the screen.
  2. Standard Navigation App Drawer Flutter: These enable simultaneous user interaction with the content of the screen and the drawer.
  3. Bottom Navigation App Drawer Flutter: These resemble modal navigation drawers, with the exception that they are oriented toward the screen’s lower third.


import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.lightBlue,
      home: const MyHomePage(title: 'Flutter Service'),

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  State<MyHomePage> createState() => _MyHomePageState();

class _MyHomePageState extends State<MyHomePage> {
  Future<bool> _onPop() async {
    return false;

  Widget build(BuildContext context) {
    return WillPopScope(
        onWillPop: _onPop,
        child: Scaffold(
          appBar: AppBar(
            centerTitle: true,
            title: Text(widget.title),
          body: const Center(
              child: Text(
            'Drawer Invisible.',
            style: TextStyle(fontSize: 20.0),
          drawer: Drawer(
            child: ListView(
              padding: const EdgeInsets.all(0),
              children: [
                const DrawerHeader(
                  decoration: BoxDecoration(
                  ), //BoxDecoration
                  child: UserAccountsDrawerHeader(
                    decoration: BoxDecoration(color:,
                    accountName: Text(
                      "Flutter Service",
                      style: TextStyle(fontSize: 18),
                    accountEmail: Text(""),
                    currentAccountPictureSize: Size.square(50),
                    currentAccountPicture: CircleAvatar(
                      backgroundColor: Color.fromARGB(255, 165, 255, 137),
                      child: Text(
                        style: TextStyle(fontSize: 30.0, color:,
                      ), //Text
                    ), //circleAvatar
                  ), //UserAccountDrawerHeader
                ), //DrawerHeader
                  leading: const Icon(Icons.person),
                  title: const Text(' Profile '),
                  onTap: () {
                  leading: const Icon(,
                  title: const Text(' Course '),
                  onTap: () {
                  leading: const Icon(Icons.workspace_premium),
                  title: const Text(' Premium '),
                  onTap: () {
                  leading: const Icon(Icons.video_label),
                  title: const Text(' Videos '),
                  onTap: () {
                  leading: const Icon(Icons.edit),
                  title: const Text(' Edit '),
                  onTap: () {
                  leading: const Icon(Icons.logout),
                  title: const Text('LogOut'),
                  onTap: () {
          ), //Deawer      ),


flutter drawer

Check the Following video for a detailed overview

Related articles

Floatingactionbutton Flutter | A Detailed Overview in 2023

FloatingActionButton Flutter is particularly significant due to its special...

Flutter AppBar Example | Designs and Actions Dropdown Menu in 2023

Learn how to use the Flutter appbar. You can...

Flutter Scaffold Example | Uses, Properties and Importance in 2023

Learn more about the Flutter Scaffold widget, including its...

Case Studies

eDental App

Case Study: eDental Dentist App

Our team recently embarked on an exciting project to develop the eDental Dentist App, a cutting-edge mobile application designed for both Android and iOS...

Voltage Lab SAAS App

Voltage Lab wanted to launch a new SAAS app that would allow students to enjoy educational material with freemium features. We developed a custom...
google play app store listing

Keyword Research for EEE & Cricket Live Score App

A Cricket Live Score App & EEE Engineer App aimed to enhance their visibility on Google and the iOS app store, seeking to rank...