How To Change Flutter Drawer Icon Color – Easy Flutter Guide

flutter drawer icon color

In this post, we’ll learn how to change/customize Flutter drawer icon color.

We’ll explain it step by step by using a proper Flutter code example. First, we’ll see what the default Flutter drawer icon color is and then we will change it by using a practical code implementation.

After reading this post, you’ll be able to easily change Flutter drawer icon color in your own Flutter code with ease.

So without any delay, let’s just jump right into it.

What is Flutter Drawer Icon Color?

It specifies the icon color of Flutter drawer widget. This icon appears in the left side of an appbar of Flutter app. Its used to show a Flutter drawer widget.

Let’s first see its default color and then we’ll learn how to give it a color of our choice.

Default Icon Color of Drawer

For that, we first have to define a simple Flutter drawer widget. See below code:

Scaffold(
          drawer:Drawer(),
          appBar:AppBar()
            )
flutter drawer default icon color
We first have to pass a Flutter drawer widget to the drawer constructor of Flutter scaffold. After that, we’ve to pass an appbar widget to the appbar constructor of scaffold.
Reason for using appbar widget is that the drawer icon will be shown in that appbar. So its necessary to use it as well.
As you can see in the above image, we now have a drawer icon with a default white color.
Let’s now see how to change this Flutter drawer icon color with proper code.

Customize Flutter Drawer Icon Color (Easy Example)

In order to do that, we’ve to use the icon theme constructor of Flutter appbar widget. It takes an icon them data class, so we’ll pass it and by using its color constructor, we’ll change the icon color of Flutter drawer widget.

For demonstration, we’ll pass a red color to it and see if that changes the icon color of drawer to red or not. See below code:

Scaffold(
          drawer: Drawer(),
          appBar: AppBar(
            iconTheme: IconThemeData(color: Colors.red),
            ))
flutter drawer custom icon color
You can see that the color of icon is now successfully changed to red.
So this is how you can give a custom color of your own choice to the Flutter drawer widget icon.
Hope you’ve learned alot from this post. Do give it a try and share your experience with us.
Don’t hesitate to ask if you still have any questions related to the customization of Flutter drawer icon color. I’d be very glad to answer all your questions.
The complete source code of customized Flutter drawer icon color is available in the below section.

Custom Flutter Drawer Icon Color Source Code

flutter drawer custom icon color

import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Homepage(),
    );
  }
}
class Homepage extends StatefulWidget {
  @override
  State<Homepage> createState() => _HomepageState();
}
class _HomepageState extends State<Homepage> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
            drawer: Drawer(),
            appBar: AppBar(
              iconTheme: IconThemeData(color: Colors.red),
            )));
  }
}

Conclusion

To conclude this post, hope you now have a complete practical understanding of how to customize Flutter drawer icon color. I’ll be very happy to have your valuable feedback on this post.

I’d also highly encourage you to read my other posts as well. Thank you for reading it.

Leave a Comment

Your email address will not be published.