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

When you add drawer navigation to Scaffold, it always shows above the app bar and there is no configuration to set it below. But with a simple trick, you can set drawer layout below the app bar like below.

Get the example below in your code, and set navigation drawer below the app bar along with its menu icon. To achieve this feature, we have used two Scaffold in one layout.

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

class MyDrawer extends StatelessWidget{
  final GlobalKey<ScaffoldState> _drawerscaffoldkey = new GlobalKey<ScaffoldState>();
  //Here we will use two Scaffold, therefore we set golbal key to
  //scaffold where we will set drawer.
  //It is used to open or close drawer.s

  @override
  Widget build(BuildContext context) {
    return Scaffold( //first scaffold


        appBar: AppBar(
           title: Text("Drawer Below AppBar"),
           leading: IconButton(
              onPressed: (){
                //on drawer menu pressed
                  if(_drawerscaffoldkey.currentState.isDrawerOpen){
                      //if drawer is open, then close the drawer
                      Navigator.pop(context);
                  }else{
                      _drawerscaffoldkey.currentState.openDrawer();
                      //if drawer is closed then open the drawer.
                  }
              },
              icon: Icon(Icons.menu),
          ), // Set menu icon at leading of AppBar
        ),


        body:Scaffold( 
             //second scaffold
             key:_drawerscaffoldkey, //set gobal key defined above
             drawer: Drawer(
                 child: SingleChildScrollView(
                     // Drawer content here
                     // design your own drawer menu here.
                     child:Container(
                         color:Colors.lightGreen[100],
                         height: MediaQuery.of(context).size.height,
                         width:double.infinity,
                     )
                 )
             ),
             body: SingleChildScrollView(
                 child: Container( 
                    // your main content
                 )
             )
        )


    );
  }
}

Copy code to your project, if you get any confusing things then comment below, I will sort out for you.