CODEWITHSUNDEEP
navigation-drawerflutterflutter-layout
Ammy Kang
Ammy Kang

Reputation: 12602

Flutter navigation drawer hamburger icon color change

Hamburger icon color of navigation drawer is not changing. Its black by default. I want to change the this icon color in flutter, I am stuck, help me to change this icon color. here is my code. 

class Test extends StatefulWidget {
@override
_TestState createState() => new _TestState();
}

class _TestState extends State<Test> {


    @override
    Widget build(BuildContext context) {
    return new Scaffold(

    drawer: new Drawer(),
    appBar: new AppBar(
    title: new Text("Navigation Drawer")
        ),
       ),
     );
    }
 }

Upvotes: 93

Views: 102612

Answers (9)

CopsOnRoad
CopsOnRoad

Reputation: 267584

To change the color of icons in your Flutter app’s AppBar and other parts of the UI:

1. Using Theme Widget: This sets the primary icon theme color to red for all icons.

Theme(data: ThemeData(primaryIconTheme: IconThemeData(color: Colors.red)), child: Scaffold())

Directly Setting Icon Color: This changes the color of the menu icon in the AppBar to red.

appBar: AppBar(
  leading: IconButton(icon: Icon(Icons.menu, color: Colors.red), onPressed: () {}),
),

Upvotes: 16

Phuc Tran
Phuc Tran

Reputation: 8073

The iconTheme property of the AppBar widget is used to specify the styling for the leading icon, which is typically the menu icon.

By setting IconThemeData(color: Colors.green), the color of the leading icon in the app bar is changed to green.

@override
Widget build(BuildContext context) {
  return Scaffold(
    drawer: Drawer(),
    appBar: AppBar(
      title: Text("Navigation Drawer"),
      iconTheme: IconThemeData(color: Colors.green),
    ),
  );
}

You can also check other solutions here.

Upvotes: 241

Taher Salah
Taher Salah

Reputation: 417

you can change drawer icon color by Add iconTheme to your AppBar:-

@override
Widget build(BuildContext context) {
  return Scaffold(
    drawer: Drawer(),
    appBar: AppBar(
      title: Text("Drawer"),
      iconTheme: IconThemeData(color: Colors.black),
    ),
  );
}

Upvotes: 1

sahil patel
sahil patel

Reputation: 11

iconTheme: IconThemeData(color: Colors.red) With Adding This line you will able to get the desired output

Upvotes: 0

ParSa
ParSa

Reputation: 1426

Using The iconTheme for Appbar is not currently working with useMaterial3 = true, And all these answers defined a leading icon for the Appbar without telling how to implement it's onPress behavior, So the best way to change the Drawers icon or it's color is this :

Declare the key for Scaffold :

final scaffoldKey = GlobalKey<ScaffoldState>();

And apply it to Scaffold:

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

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

Upvotes: 4

Tanvir Ahmed
Tanvir Ahmed

Reputation: 681

You can change it from main.dart easily this way-

return MaterialApp(
      title: 'XYZ',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        appBarTheme: AppBarTheme(
          iconTheme: IconThemeData(color: Colors.black),
          actionsIconTheme: IconThemeData(color: Colors.blue),
          backgroundColor: theme.backgroundColor,
          elevation: 0,
        ),

      ),

Upvotes: 0

Mr. Poopybutthole
Mr. Poopybutthole

Reputation: 374

This is the only solution to make the button clickable otherwise you need to openDrawer onTap.

AppBar(
            iconTheme: const IconThemeData(
              size: 40, //change size on your need
              color: Colors.black, //change color on your need
            ),
    ),

Upvotes: 3

Harshil Patel
Harshil Patel

Reputation: 127

Use iconTheme in Appbar like this:

Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text("App Bar"),
          iconTheme: IconThemeData(color: Colors.black),
        ),
        drawer: Drawer(),
      );
}

Upvotes: 5

kishan verma
kishan verma

Reputation: 1000

To change color of your icon use this

  @override
  Widget build(BuildContext context) {
   return new MaterialApp(
   home: new Scaffold(
    appBar: AppBar(title: new Text('List view example'),
      leading: new Icon(Icons.menu,color: Colors.green,),
   ),
),
 );
 }

Icon(Icons.menu,color: Colors.green,) define color inside Icon

Upvotes: 5

Related Questions