48

If I have an AppBar like this:

How do I add a clickable icon to it like this?

Suragch
  • 484,302
  • 314
  • 1,365
  • 1,393
  • 3
    Possible duplicate of [How can I have clickable text in the AppBar in Flutter](https://stackoverflow.com/questions/52713583/how-can-i-have-clickable-text-in-the-appbar-in-flutter) – Shababb Karim Sep 15 '19 at 06:32
  • Doesn't matter. Same principle. You can wrap Icon in a flat button or `InkWell` and have the same effect. I thought there was a lack of trying to find resources and experimenting when there were similar resources regarding making actions clickable in Appbar. – Shababb Karim Sep 16 '19 at 05:36
  • 1
    `actions` is list of widgets - doesn't matter what widget you put into - icon or text – Andrii Turkovskyi Sep 17 '19 at 06:30

2 Answers2

159

You can add an icon to the AppBar by adding an IconButton widget to the actions list of the AppBar.

AppBar(
  title: Text('My App'),
  actions: <Widget>[
    IconButton(
      icon: Icon(
        Icons.settings,
        color: Colors.white,
      ),
      onPressed: () {
        // do something
      },
    )
  ],
),

See also

iDecode
  • 22,623
  • 19
  • 99
  • 186
Suragch
  • 484,302
  • 314
  • 1,365
  • 1,393
42

enter image description here

Use leading for left sided icon and actions for right sided.

AppBar(
  centerTitle: true,
  title: Text('AppBar'),
  leading: IconButton(
    onPressed: () {},
    icon: Icon(Icons.home),
  ),
  actions: [
    IconButton(
      onPressed: () {},
      icon: Icon(Icons.call),
    ),
    IconButton(
      onPressed: () {},
      icon: Icon(Icons.more_vert),
    ),
  ],
)
iDecode
  • 22,623
  • 19
  • 99
  • 186