How can I change Drawer icon in flutter?

The drawer has this default three horizontal bars as default icon but I want to change it to something else.
I have checked the possible options under the `Drawer()`, but no property seems to be attached to that.

This should work.

Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title:Text('hi'),
leading: IconButton(
icon: Icon(Icons.accessible),
onPressed: () => Scaffold.of(context).openDrawer(),
),
),
);




From the docs ->

> {Widget leading} Type: Widget
A widget to display before the [title].
If this is null and [automaticallyImplyLeading] is set to true, the [AppBar] will imply an appropriate widget. For example, if the [AppBar] is in a [Scaffold] that also has a [Drawer], the [Scaffold] will fill this widget with an [IconButton] that opens the drawer (using [Icons.menu]). If there's no [Drawer] and the parent [Navigator] can go back, the [AppBar] will use a [BackButton] that calls [Navigator.maybePop].
The following code shows how the drawer button could be manually specified instead of relying on [automaticallyImplyLeading]:

import 'package:flutter/material.dart';
Widget build(context) {
return AppBar(
leading: Builder(
builder: (BuildContext context) {
return IconButton(
icon: const Icon(Icons.menu),
onPressed: () {
Scaffold.of(context).openDrawer();
},
tooltip: MaterialLocalizations.of(context).openAppDrawerTooltip,
);
},
),
);
}
>
The [Builder] is used in this example to ensure that the context refers to that part of the subtree. That way this code snippet can be used even inside the very code that is creating the [Scaffold] (in which case, without the [Builder], the context wouldn't be able to see the [Scaffold], since it would refer to an ancestor of that widget).

appBar: AppBar(
leading: Builder(
builder: (context) => IconButton(
icon: Icon(Icons.menu_rounded),
onPressed: () => Scaffold.of(context).openDrawer(),
),
),
title: Text(
"Track your Shipment",
),
),

Lets say you have: index.dart (where you want to use the appbar), drawer.dart (your drawer or navigation menu) and appbar.dart (your appbar)

you can do this in drawer:

Widget drawer(BuildContext context) {
return Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
Container(
...
)
);

then your appbar.dart:

class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
@override
Widget build(BuildContext context) {
return AppBar(
backgroundColor: Colors.white,
leading: InkWell(
onTap: () => Scaffold.of(context).openDrawer(),
child: Image.asset("assets/images/imgAppBar.png"),
),
title: Container(...

then your index.dart:

@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
drawer: drawer(context),
appBar: CustomAppBar(),
...

this is just a simple one. You can use IconButton in case you want to use an Icon etc.

Actually, i tried the answer by cmd_prompter and it didn't work for me.

The better approach is described [here][1]

My working code is here:

return DefaultTabController(
key: Key("homePage"),
length: 2,
child: Scaffold(
endDrawer: Drawer(

),
appBar: AppBar(
leading: BackButton(
onPressed: () {
},
),
title: Text(profile.selectedCity!),
actions: [
Padding(
padding: EdgeInsets.symmetric(horizontal: baseUnit(3)),
child: Builder(
builder: (context) => IconButton(
icon: Icon(Icons.account_circle),
onPressed: () => Scaffold.of(context).openEndDrawer(),
)
)
)
It worked fine for me - especially this part regarding using Builder. This is important - otherwise it was not working for me.

[1]:

[To see links please register here]

You can open a drawer with a custom button like this too.
create this scaffold key.

var scaffoldKey = GlobalKey<ScaffoldState>();
now added a scaffolled in your state class like this

@override
Widget build(BuildContext context) {
return Scaffold(
key: scaffoldKey,
drawer: Drawer(
child: Text('create drawer widget tree here'),
),
appBar: AppBar(
backgroundColor: Colors.white,
title: Text(
'appName',
style: Theme.of(context).textTheme.headline2,
),
leading: IconButton(
onPressed: () {
scaffoldKey.currentState?.openDrawer();
},
icon: Image.asset(
'assets/images/menu.png',
fit: BoxFit.cover,
),
),
),
body: Container(),
);
}


[![enter image description here][1]][1]


[1]:

To only change the icon color, it's easier to do by [adding an iconTheme to the AppBar][1]:

> <!-- begin snippet: js hide: false console: true babel: false -->
>
> <!-- language: dart -->
>
> @override
> Widget build(BuildContext context) {
> return Scaffold(
> drawer: Drawer(),
> appBar: AppBar(
> title: Text("Navigation Drawer"),
> iconTheme: IconThemeData(color: Colors.green),
> ),
> );
> }
>
> <!-- end snippet -->


[1]:

[To see links please register here]

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

@override State createState() =>HomeOneState(); }

var scaffoldKey = GlobalKey();

class HomeOneState extends State { @override Widget build(BuildContext context) { var theme = Theme.of(context); return Directionality( textDirection: TextDirection.rtl, child: Scaffold( key: scaffoldKey, drawerEnableOpenDragGesture: true, // drawerScrimColor: Colors.red, appBar: AppBar( leading: IconButton( onPressed: () => scaffoldKey.currentState?.openDrawer(), icon: const Icon( Icons.add, color: Colors.red, )), ),
```

You need to create the Global key of type ScaffoldKey the use that to open the drawer and change the icon too:

Widget build(BuildContext context) {
var scaffoldKey = GlobalKey<ScaffoldState>();
return Scaffold(
key: scaffoldKey,
appBar: AppBar(
title:Text('hi'),
leading: IconButton(
icon: Icon(Icons.accessible),
onPressed: () => scafoldKey.currentState.openDrawer(),
),
),
);

AppBar(
leading: IconButton(
onPressed: () {
// Code
},
icon: Icon(Icons.arrow_back),
),
),