Flutter Drawer Icon Change

A drawer icon is a graphical element that is used to open and close a drawer in a mobile app. It is typically displayed in the top-left corner of the app screen, and it is often represented by three horizontal lines. When the user taps on the drawer icon, the drawer slides out from the left side of the screen, revealing a list of navigation options.

In this tutorial , we will learn how to change the drawer menu hamburger icon in Flutter. You will also learn to change the icon size and color. After changing the icon, we will implement drawer open and close functionality on icon button. 

How to Change Drawer Icon in Flutter:

Scaffold(
    appbar:AppBar(),
    drawer: Drawer(),
    body: Container()
)

This is the basic structure of Scaffold. When you add Drawer() widget, the menu icon will appear on the AppBar at left side, we will change the icon on app bar.

AppBar(
  leading: IconButton(
      icon: Icon(Icons.person), //icon
      onPressed: (){
        
      },
  ),
)

Change the icon data according to your need, if you want to change the size and color, then pass the following attributes.

AppBar(
  leading: IconButton(
      icon: Icon(Icons.person, size: 40, color: Colors.red,), //icon
      onPressed: (){
        
      },
  ),
)

But, the problem is, if you tap on it, the drawer will not open or close, to implement the opening and closing of the drawer when clicking on this button, use the following code:

final scaffoldKey = GlobalKey<ScaffoldState>();

Declare the key for Scaffold, and apply it to Scaffold:

Scaffold(
     key: scaffoldKey,
     drawer: Drawer()
)

Now, apply the drawer icon like below with click action:

AppBar(
  title: Text("My AppBar"),
  leading: IconButton(
      icon: Icon(Icons.person),
      onPressed: (){
        if(scaffoldKey.currentState!.isDrawerOpen){
              scaffoldKey.currentState!.closeDrawer();
              //close drawer, if drawer is open
        }else{
              scaffoldKey.currentState!.openDrawer();
              //open drawer, if drawer is closed
        }
      },
  ),
)

In this way, you can change the drawer icon in Flutter.

#flutter