How to add icon to AppBar in Flutter

Question

If I have an AppBar like this:

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

Lipid

Possible duplicate of How can I have clickable text in the AppBar in Flutter – Junji

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. – Junji

actions is list of widgets - doesn't matter what widget you put into - icon or text – Castle

Answer 1

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

• AppBar Basics documentation
• How can I have clickable text in the AppBar in Flutter

Lipid

what if you want the icon to be on the left side? – Intoxicative

@AntoninGAVREL, You can use the leading parameter of AppBar to add a widget (including an icon) to the left side. – Lipid

Answer 2

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

Divertimento

Leading icon is not visible. – Rockett

@BoraKeçeci Please share a minimal reproducible code via Dartpad. – Divertimento