How to Add Navigation Drawer Below App Bar and Set Menu Icon in Flutter

Navigation Drawer is one of the most important components of Material Design. It provides quick navigation to different parts of an app, making it easy for users to access content they need. In this blog post, we’ll show you how to add a navigation drawer below the app bar and set a menu icon in Flutter.

First, let’s create a new Flutter project using the following command:

flutter create navigation_drawer_below_app_bar

Now, let’s create a new Dart file called main_drawer.dart and add the following code:

import 'package:flutter/material.dart';

class MainDrawer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: Column(
        children: <Widget>[
          Container(
            height: 120,
            width: double.infinity,
            padding: EdgeInsets.all(20),
            color: Theme.of(context).accentColor,
            alignment: Alignment.centerLeft,
            child: Text(
              'Navigation Drawer',
              style: TextStyle(
                fontWeight: FontWeight.w900,
                fontSize: 30,
                color: Theme.of(context).primaryColor,
              ),
            ),
          ),
          SizedBox(
            height: 20,
          ),
          ListTile(
            leading: Icon(Icons.home),
            title: Text(
              'Home',
              style: TextStyle(
                fontSize: 18,
                fontWeight: FontWeight.bold,
              ),
            ),
            onTap: () {
              Navigator.of(context).pop();
            },
          ),
          ListTile(
            leading: Icon(Icons.person),
            title: Text(
              'Profile',
              style: TextStyle(
                fontSize: 18,
                fontWeight: FontWeight.bold,
              ),
            ),
            onTap: () {
              Navigator.of(context).pop();
            },
          ),
        ],
      ),
    );
  }
}

In the code above, we’ve created a MainDrawer widget that returns a Drawer widget. The drawer has a header that displays the text “Navigation Drawer” and a background color of Theme.of(context).accentColor. The drawer also has two list items, “Home” and “Profile”, each with its own icon and a clickable onTap event.

Now, let’s create a new Dart file called home_page.dart and add the following code:

import 'package:flutter/material.dart';
import 'main_drawer.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'Home',
          style: TextStyle(
            fontSize: 20,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
      drawer: MainDrawer(),
      body: Container(
        child: Center(
          child: Text(
            'Welcome to Home Page',
            style: TextStyle(
              fontSize: 18,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
      ),
    );
  }
}

In the code above, we’ve created a HomePage widget that returns a Scaffold widget. The Scaffold widget has an AppBar widget with a title of “Home” and a body that displays the text “Welcome to Home Page”. We’ve also added the MainDrawer widget as the drawer property of the Scaffold widget.

Next, let’s add a menu icon to the app bar. To do this, we need to wrap the AppBar widget with a Builder widget and add an IconButton widget to the actions property of the AppBar widget.

Here is the updated code for the home_page.dart file:

import 'package:flutter/material.dart';
import 'main_drawer.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'Home',
          style: TextStyle(
            fontSize: 20,
            fontWeight: FontWeight.bold,
          ),
        ),
        actions: <Widget>[
          Builder(
            builder: (ctx) => IconButton(
              icon: Icon(Icons.menu),
              onPressed: () {
                Scaffold.of(ctx).openDrawer();
              },
            ),
          ),
        ],
      ),
      drawer: MainDrawer(),
      body: Container(
        child: Center(
          child: Text(
            'Welcome to Home Page',
            style: TextStyle(
              fontSize: 18,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
      ),
    );
  }
}

In the code above, we’ve added an IconButton widget to the actions property of the AppBar widget. The IconButton widget displays a menu icon and opens the navigation drawer when pressed.

Finally, let’s update the main.dart file to display the HomePage widget as the initial route. Here is the updated code for the main.dart file:

import 'package:flutter/material.dart';
import 'home_page.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Navigation Drawer with Menu Icon',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: HomePage(),
    );
  }
}

In the code above, we’ve created a MyApp widget that returns a MaterialApp widget. The MaterialApp widget has a title of “Navigation Drawer with Menu Icon”, a primary color of blue, and the HomePage widget as the home property. The runApp function is used to run the app and display the MyApp widget.

That’s it! With these changes, you should now have a navigation drawer below the app bar and a menu icon in your Flutter app.