Flutter Drawer – Create a Smooth Navigation Menu

 A Drawer is a side menu that slides in from the left and provides quick navigation within the app. It is commonly used when there are multiple sections in an app, but space is limited for a bottom navigation bar or tabs.

In this blog, we’ll learn how to implement a Drawer in Flutter and customize it to match your app’s design.

Let's Jump into the Code! 🚀

Step 1: Setting Up the Basic Drawer

import 'package:flutter/material.dart';

// Function to trigger app build
void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  final appTitle = 'Flutter Drawer Demo';

  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: appTitle,
      home: MyHomePage(title: appTitle),
    ); // MaterialApp
  }
}

class MyHomePage extends StatelessWidget {
  final String title;

  const MyHomePage({Key? key, required this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
       
      ),
      body: const Center(
        child: Text(
          'A drawer is an invisible side screen.',
          style: TextStyle(fontSize: 20.0),
        ),
      ),
        drawer: Drawer(
          child: Column(
            children: [
              // Drawer Header Using Container
              Container(
                height: 150,  // Height set karein
                width: double.infinity,  // Pure width le
                color: Colors.blue,  // Background color
                alignment: Alignment.center,  // Text center mein rakhein
                child: Text(
                  "Welcome!",
                  style: TextStyle(color: Colors.white, fontSize: 24),
                ),
              ),

              // Drawer Item 1 - Home
              GestureDetector(
                onTap: () {
                  Navigator.pop(context);
                },
                child: Container(
                  padding: EdgeInsets.all(16),
                  width: double.infinity,
                  child: Row(
                    children: [
                      Icon(Icons.home, color: Colors.black),  // Icon
                      SizedBox(width: 10),  // Space
                      Text("Home", style: TextStyle(fontSize: 18)),  // Text
                    ],
                  ),
                ),
              ),

              // Drawer Item 2 - Settings
              GestureDetector(
                onTap: () {
                  Navigator.pop(context);
                },
                child: Container(
                  padding: EdgeInsets.all(16),
                  width: double.infinity,
                  child: Row(
                    children: [
                      Icon(Icons.settings, color: Colors.black),
                      SizedBox(width: 10),
                      Text("Settings", style: TextStyle(fontSize: 18)),
                    ],
                  ),
                ),
              ),

              // Drawer Item 3 - Logout
              GestureDetector(
                onTap: () {
                  Navigator.pop(context);
                },
                child: Container(
                  padding: EdgeInsets.all(16),
                  width: double.infinity,
                  child: Row(
                    children: [
                      Icon(Icons.logout, color: Colors.black),
                      SizedBox(width: 10),
                      Text("Logout", style: TextStyle(fontSize: 18)),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ), // Drawer
    );
  }
}

Step 2: Adding Profile Details in Drawer

To enhance the drawer header, we can use UserAccountsDrawerHeader instead of Container to display profile name, email, and avatar.

drawer: Drawer(
  child: ListView(
    padding: const EdgeInsets.all(0),
    children: [
      const DrawerHeader(
        decoration: BoxDecoration(
          color: Colors.green,
        ), // BoxDecoration
        child: UserAccountsDrawerHeader(
          decoration: BoxDecoration(color: Colors.green),
          accountName: Text(
            "Praveen Suthar",
            style: TextStyle(fontSize: 18),
          ),
          accountEmail: Text("sutharpraveen234@gmail.com"),
          currentAccountPictureSize: Size.square(50),
          currentAccountPicture: CircleAvatar(
            backgroundColor: Color.fromARGB(255, 165, 255, 137),
            child: Text(
              "PS",
              style: TextStyle(fontSize: 30.0, color: Colors.blue),
            ), // Text
          ), // CircleAvatar
        ), // UserAccountDrawerHeader
      ), // DrawerHeader
      ListTile(
        leading: const Icon(Icons.person),
        title: const Text(' My Profile '),
        onTap: () {
          Navigator.pop(context);
        },
      ),
      ListTile(
        leading: const Icon(Icons.book),
        title: const Text(' My Course '),
        onTap: () {
          Navigator.pop(context);
        },
      ),
      ListTile(
        leading: const Icon(Icons.workspace_premium),
        title: const Text(' Go Premium '),
        onTap: () {
          Navigator.pop(context);
        },
      ),
      ListTile(
        leading: const Icon(Icons.video_label),
        title: const Text(' Saved Videos '),
        onTap: () {
          Navigator.pop(context);
        },
      ),
      ListTile(
        leading: const Icon(Icons.edit),
        title: const Text(' Edit Profile '),
        onTap: () {
          Navigator.pop(context);
        },
      ),
      ListTile(
        leading: const Icon(Icons.logout),
        title: const Text('LogOut'),
        onTap: () {
          Navigator.pop(context);
        },
      ),
    ],
  ),
), 

Conclusion 🏁

A Drawer in Flutter is a great way to add navigation options without taking up too much screen space. You can customize it using Container, or use the built-in UserAccountsDrawerHeader for a more structured look.

Key Takeaways:

✔ Use Drawer inside Scaffold to create a side menu.
✔ Container allows full customization of the drawer header.
✔ UserAccountsDrawerHeader is great for profile details.
✔ Use ListTile for a cleaner and better navigation experience.

Now, you’re ready to customize your drawer to match your app’s design! 🚀💙