How to Change Drawer Icon in Flutter

In this example, we are going to show you 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. 

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
        }
      },
  ),
)

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatefulWidget{
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {  

  final scaffoldKey = GlobalKey<ScaffoldState>();

  @override
  Widget build(BuildContext context) { 
    return  Scaffold(
          key: scaffoldKey,
          appBar: 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
                  }
               },
            ),
          ),

          drawer: Drawer(),
          
          body: Container()
       );
  }
}

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

No any Comments on this Article


Please Wait...