If I have an AppBar like this:
How do I add a clickable icon to it like this?
3
2 Answers
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
answered Sep 15, 2019 at 4:45
2 Comments
Antonin GAVREL
what if you want the icon to be on the left side?
Suragch
@AntoninGAVREL, You can use the
leading parameter of AppBar to add a widget (including an icon) to the left side.
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),
),
],
)
2 Comments
iDecode
@BoraKeçeci Please share a minimal reproducible code via Dartpad.
Criss Gibran
@BoraKeçeci if the icons are NOT visible, it is because they are taking the default primary colors of the bar, add : color: Colors.white to the IconButton and you should be fine.
InkWelland 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.actionsis list of widgets - doesn't matter what widget you put into - icon or text