Change Drawer Icon in Flutter [Color and Size]

The Drawer widget in Flutter is used to provide navigation to different pages. Typically, It opens up from the left side of your screen by tapping the menu icon and closes on tapping outside. While working with the Drawer widget sometimes, you may need to change the drawer icon or change its color and size to support your app branding. So in this tutorial, we’ll learn how to change drawer icon in Flutter. We’ll also see how to change the color and size of the drawer icon.

Here’s what we’ll cover:

• Steps to Change Drawer Icon in Flutter
• Changing the Icon Color
• Change Icon Size

Steps to Change Drawer Icon in Flutter

To change the drawer icon in Flutter, add an IconButton widget inside the leading property of the AppBar widget. Inside the IconButton you can set any icon of your choice. Then, inside the onPressed of an IconButton, you can write a method to open the drawer.

Here’s is how you exactly do it:

Step 1: Add the leading property inside the AppBar widget and assign the Builder( builder: (BuildContext context) { return widget; })

Step 2: From the Builder, return the IconButton() widget.

Step 3: Inside the IconButton() add the icon property and set your icon.

Step 4: Also, add onPressed property and add a method to open the drawer i.e Scaffold.of(context).openDrawer();

Step 5: Optionally you can add the tooltip property and assign the MaterialLocalizations.of(context).openAppDrawerTooltip.

Code Example:

return Scaffold(
  drawer: ...,
  appBar: AppBar(
    leading: Builder(
      builder: (BuildContext context) {
        return IconButton(
          icon: const Icon(
            Icons.remove_red_eye_sharp,
          ),
          onPressed: () {
            Scaffold.of(context).openDrawer();
          },
          tooltip: MaterialLocalizations.of(context).openAppDrawerTooltip,
        );
      },
    ),
  ),
  body: ...,
);

Code Explanation:

• Adding the leading icon to AppBar will override the default behavior (showing menu icon on home, back icon in subpage) and will always show the icon set as the leading icon.
• Wrapping the IconButton widget inside the Builder widget helps in accessing the scaffold and ultimately allows you to open the drawer.

Output:

Looking to customize your app’s icon too? Check out our blog post on “Changing App Icons in Flutter” for an easy step-by-step guide to updating your app icon. With the flutter_launcher_icons package, you can quickly and easily generate all the required icon sizes for both Android and iOS platforms.

Changing the Icon Color

To change the drawer icon color in Flutter:

• Simply add the iconTheme property inside the AppBar widget and assign the IconThemeData(color: [your_color]).

Code Example:

AppBar(
  iconTheme: IconThemeData(color: Colors.red),
)

• If you have added the custom drawer icon, then you can also add the color property inside the Icon widget and set the color of your choice.

Code Example:

AppBar(
  leading: Builder(
    builder: (BuildContext context) {
      return IconButton(
        icon: const Icon(
          Icons.remove_red_eye_sharp,
          color: Colors.red, // Change Custom Drawer Icon Color
        ),
        onPressed: () {
          Scaffold.of(context).openDrawer();
        },
        tooltip: MaterialLocalizations.of(context).openAppDrawerTooltip,
      );
    },
  ),
)

Output:

Also, see how to add color from hex. By using hex codes, you can easily create colors that match your brand or design vision.

Change Icon Size

To change the Drawer icon size:

• Add the custom drawer icon as per the instructions here.
• Set the icon property to Icons.menu.
• Add the size property and set the appropriate size for your drawer icon.

Code Example:

AppBar(
  leading: Builder(
    builder: (BuildContext context) {
      return IconButton(
        icon: const Icon(
          Icons.menu,
          color: Colors.red,
          size: 44, // Changing Drawer Icon Size
        ),
        onPressed: () {
          Scaffold.of(context).openDrawer();
        },
        tooltip: MaterialLocalizations.of(context).openAppDrawerTooltip,
      );
    },
  ),
)

Output:

That’s it. Thanks!

Conclusion

Adding a Drawer to your app helps you navigate inside your app. In this tutorial, we learned how to change drawer icon in Flutter with practical examples. We also explored how to change the color and size of the drawer icon step by step.

Would you like to check other interesting Flutter tutorials?