How to add an icon inside the appBar? - Flutter
279
try this:
appBar: AppBar(
title: Row(
mainAxisAlignment:MainAxisAlignment.center,
children:[
Text(
'my app name',
style: TextStyle(
fontFamily: 'OpenSansBold',
fontSize: 26.0,
),
),
Icon(
Icons.audiotrack,
color: Colors.green,
size: 30.0,
),
]
)
),
also, you can change mainAxisAlignment
for aligning these items or change their order to show the icon
at the start or the end of the text. The result is as follow:
Update
if you want to add an image
instead of an icon
, try this:
appBar: AppBar(
title: Row(
mainAxisAlignment:MainAxisAlignment.center,
children:[
Text(
'my app name',
style: TextStyle(
fontFamily: 'OpenSansBold',
fontSize: 26.0,
),
),
Image(image: AssetImage('your directory'));
]
)
),
note that first, you should add your image to the asset
section of pubspec.yaml
file as follow:
flutter:
assets:
- Your directory
for more info see this.
Author by
bilbo_bo
Updated on January 01, 2023Comments
-
bilbo_bo over 1 year
I want to add an
icon
right next to the titlemy app name
of the app (the icon has to be on the right).Here is the appBar:
appBar: AppBar( title: Text( 'my app name', style: TextStyle( fontFamily: 'OpenSansBold', fontSize: 26.0, ), ), ),
It doesn't have to be a clickable icon, it is just the logo of the app.
-
bilbo_bo over 2 yearsWhat if I already have an icon inside a folder? How could I import it?
-
Abbasihsn over 2 yearsis it an image? if so, I have added an update to my answer.
-
bilbo_bo over 2 yearsExactly what I needed! Thank you so much @Abbasihsn