CODEWITHSUNDEEP
dartflutter
Rachit Rawat
Rachit Rawat

Reputation: 2639

How to change the endDrawer icon in flutter?

By default, the endDrawer icon in flutter is the hamburger icon. I wanna change it to a filter icon.

new Scaffold(
  endDrawer: Drawer(),
  ...
}

Upvotes: 21

Views: 16265

Answers (1)

rmtmckenzie
rmtmckenzie

Reputation: 40423

This should do what you want:

import 'package:flutter/material.dart';

class App extends StatefulWidget {
  @override
  _AppState createState() => _AppState();
}

class _AppState extends State<App> {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        endDrawer: Drawer(),
        appBar: AppBar(
          actions: [
            Builder(
              builder: (context) => IconButton(
                    icon: Icon(Icons.filter),
                    onPressed: () => Scaffold.of(context).openEndDrawer(),
                    tooltip: MaterialLocalizations.of(context).openAppDrawerTooltip,
                  ),
            ),
          ],
        ),
        body: new Container(),
      ),
    );
  }
}

void main() => runApp(App());

Note the 'Builder' is necessary so that the IconButton gets the context underneath the Scaffold. Without that, it would instead be using the context of the App and therefore wouldn't be able to find the Scaffold.

A different (cleaner?) option would be to make a StatelessWidget that encloses IconButton.

Upvotes: 62

Related Questions