How can I change Drawer icon in flutter?

Question

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.

Answer 1

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).

Answer 2

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

Answer 3

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(),
    );
  }

Happy coding Guys :)

Answer 4

 appBar: AppBar(

    leading: Icon(Icons.favorite),

    title: Text("Drawer"),),

Answer 5

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.

Answer 6

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

The better approach is describedhere

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.

Answer 7

In case where someone needs to change the icon color only:

It's easier to do by adding an iconTheme to the AppBar

Answer 8

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 scafoldKey = GlobalKey<ScaffoldState>();
    return Scaffold(
      appBar: AppBar(
        title:Text('hi'),
        leading: IconButton(
          icon: Icon(Icons.accessible),
          onPressed: () => scafoldKey.currentState.openDrawer(),
        ),
      ),
    );

Answer 9

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