How to change Drawer Icon Color in Flutter

In the app development drawer widget is an essential widget in the flutter UI kit we can use the drawer widget for quick navigation in an application like other widgets we can also customize the drawer widget according to our design. In this article, we are going to learn How to change Drawer Icon Color in Flutter.

We can change drawer icon color in various ways let's see one by one

1. Using Icon Theme:

The first way is we can use the Icon theme in the Appbar widget You can see the following piece of code.

Scaffold(
        drawer: Drawer(),
        appBar: AppBar(
          automaticallyImplyLeading: false,
          centerTitle: true,
          iconTheme: IconThemeData(color: Colors.red),//Change color here
          title: Text(
            "Errorgram",
          ),
        ),
)

 

2. Using ThemeData:

We can change the icon color of the drawer using ThemeData.

Theme(
      data: ThemeData(primaryIconTheme: IconThemeData(color: Colors.yellow)),//Change color here
      child: Scaffold(
        drawer: Drawer(),
        appBar: AppBar(
          automaticallyImplyLeading: false,
          centerTitle: true,
          title: Text(
            "Errorgram",
          ),
        ),
)

You can see in the above code we use theme data and set the yellow color to primaryIconTheme properties of Themedata.

3. Using Set Custom AppBar Leading Icon:

We can change the drawer icon color to set the custom leading icon of the app bar you can see below the piece of the code.

Scaffold(
        drawer: Drawer(),
        appBar: AppBar(
          automaticallyImplyLeading: false,
          centerTitle: true,
          leading: Builder(
            builder: (BuildContext context) {
              return InkWell(
                child: Icon(
                  Icons.menu,
                  color: Colors.yellow,
                  size: 30,
                ),
                onTap: () {
                  print("Drawer Open--->");
                  Scaffold.of(context)
                      .openDrawer(); //You can open drawer from the here
                },
              );
            },
          ),
    )
)

You can check the full example below.

Full Code:

import 'package:flutter/material.dart';

class Errorgram extends StatefulWidget {
  const Errorgram({Key? key}) : super(key: key);

  @override
  State<Errorgram> createState() => _ErrorgramState();
}

class _ErrorgramState extends State<Errorgram> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      bottom: false,
      child: Scaffold(
        drawer: Drawer(),
        appBar: AppBar(
          automaticallyImplyLeading: false,
          centerTitle: true,
          leading: Builder(
            builder: (BuildContext context) {
              return InkWell(
                child: Icon(
                  Icons.menu,
                  color: Colors.yellow,
                  size: 30,
                ),
                onTap: () {
                  print("Drawer Open--->");
                  Scaffold.of(context)
                      .openDrawer(); //You can open drawer from the here
                },
              );
            },
          ),
          title: Text(
            "Errorgram",
          ),
        ),
        body: Center(
          child: Center(
              child: Text(
            "Errorgram",
            style: TextStyle(color: Colors.blue, fontSize: 20),
          )),
        ),
      ),
    );
  }
}

 

Output:

 

Conclusion:

We have learned from this article How to change Drawer Icon Color in Flutter step by step and various ways with examples. I hope this post may help you also you can find other interesting articles here.

 

Tags: