How to add an icon inside the appBar? - Flutter

user_16238159 0
Viewed 640

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.

dart flutter mobile android
1 Answers

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.

user_108664530
Related