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: enter image description here


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.

Share:
279
bilbo_bo
Author by

bilbo_bo

Updated on January 01, 2023

Comments

  • bilbo_bo
    bilbo_bo over 1 year

    I want to add an icon right next to the title my 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
    bilbo_bo over 2 years
    What if I already have an icon inside a folder? How could I import it?
  • Abbasihsn
    Abbasihsn over 2 years
    is it an image? if so, I have added an update to my answer.
  • bilbo_bo
    bilbo_bo over 2 years
    Exactly what I needed! Thank you so much @Abbasihsn