Posted in Dart Flutter

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

Flutter – How to Add Navigation Drawer Below App Bar and Set Menu Icon Posted on May 13, 2020Leave a comment
I'm Hari Prasad Chaudhary from Nepal, developer of the finest educational website/app "MeroSpark" and the finest eCommerce system "PasalaY". Here I share the code snippet which I learn during development.

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.

drawer below appbar

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.

I'm Hari Prasad Chaudhary from Nepal, developer of the finest educational website/app "MeroSpark" and the finest eCommerce system "PasalaY". Here I share the code snippet which I learn during development.

Leave a Reply

Your email address will not be published. Required fields are marked *