How to replace title with image in AppBar

Question

How can I replace the AppBar title with image logo in Flutter?

score 130 · Accepted Answer · edited May 22 '20 at 17:10

130

The title property takes a Widget, so you can pass any widget to it.

For example, an image added to assets

Scaffold(
  appBar: AppBar(
    title: Image.asset('assets/title.png', fit: BoxFit.cover),
  ),
  body: ...
)

More info

edited May 22 '20 at 17:10

CopsOnRoad

237,138
77
654
440

answered Apr 23 '18 at 14:53

Günter Zöchbauer

623,577
216
2,003
1,567

3

This is a good answer. I'd like to add that it made sense for me to make the image final: ```final Image titleImage = Image.asset(...)``` Without the image being final, it would lead to more rebuilds than the simple `Text` widget. – rgisi Jun 17 '20 at 16:25
1

Hey @rgisi! May you add a link that clarifies it? I don't know how the build actually works under the hood and it would be great to know why making the `Image` final will skip some rebuilds. Thanks a lot! – Roc Boronat Sep 14 '20 at 10:58

Sérgio Oliveira · Answer 2 · 2018-12-19T19:06:07.990

47

  appBar: AppBar(
          title: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                  Image.asset(
                 'assets/logo.png',
                  fit: BoxFit.contain,
                  height: 32,
              ),
              Container(
                  padding: const EdgeInsets.all(8.0), child: Text('YourAppTitle'))
            ],

          ),
  )

edited Dec 19 '18 at 19:06

answered Dec 19 '18 at 18:37

Sérgio Oliveira

471
4
7

Thanks, but how to increase logo size? Seems it is limited by about 60 – mr.boris Oct 07 '19 at 15:50
You must increase the parameter height, i.e. height: XX, – Sérgio Oliveira Oct 08 '19 at 16:32
If you want an AppBar taller you need to change the parameters to the AppBar appBar: PreferredSize( preferredSize: Size.fromHeight(50.0), – Sérgio Oliveira Oct 08 '19 at 16:34
Thanks! But what if I need to make it flexible just relying on the child height only? By default appBar's height is constant (even with preferredSize param) and it clips all stuff inside. So I need to manipulate only child height but not both of appBar height and child height. – mr.boris Oct 09 '19 at 11:12
But what if you still need a back button on top the app bar and you are using a PreferredSize instead of AppBar? – KollKode Oct 28 '19 at 21:46
how do you prevent the image in the appbar from overflowing if you shrink the webpage? – Golden Lion Jun 19 '20 at 21:40

score 11 · Answer 3 · answered Oct 03 '19 at 23:15

App themes are probably best long term. (Make sure you've properly added the logo image to your assets folder and updated 'pubspec.yaml' file too).

Create a folder (e.g. 'themes') in your /lib path.
Create a "style" file (e.g. 'style.dart') in that folder. (Use this file also to implement different themes for your app: colors, fonts, etc.)

Create an image widget in your 'style' file, e.g. (height, weight, path, alignment up to you):

Image appLogo = new Image(
image: new ExactAssetImage("assets/images/AppLogo.png"),
height: 28.0,
width: 20.0,
alignment: FractionalOffset.center);

In the title field of your AppBar, add 'appLogo' (or whatever you named the widget), like this (don't forget to import your 'style' file):
```
child: Scaffold(
appBar: AppBar(
  title: appLogo,        
),
```
Now, if ever you need to change this logo, you simply need to edit your style.dart file with the new image path and that's it. And if you have different themes and name your widgets the same way in each style file, you'll also be able to rapidly implement different styles (e.g. 'style1', 'style2', etc.) on the fly just by importing the respective file in just a couple places.

score 3 · Answer 4 · answered Apr 18 '21 at 14:44

The problem is that the AppBar does not fit it Height with the image size. To solve this problem, i've set the image and the AppBar Height (including the padding)

Here's my code:

Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    title: Image.asset(
      "assets/images/logo_light.png",
      fit: BoxFit.contain,
      height: 72,
    ),
    toolbarHeight: 88,
    actions: [
      IconButton(onPressed: () => {}, icon: Icon(Icons.search)),
    ],
  ),
);

score 2 · Answer 5 · answered Nov 02 '21 at 19:06

2

AppBar(
  centerTitle: true,
  title: Image.asset('assets/your_logo.png', height: 32),
  backgroundColor: Theme.of(context).primaryColor,
)

answered Nov 02 '21 at 19:06

Saad Ahmed

700
1
8
15

score 0 · Answer 6 · answered Oct 28 '21 at 02:44

the above didn't quite work for me, this adds the picture background I want to the entire app bar and leaves the option to keep a title. updated for flutter/dart 2.0 null safety

Scaffold(
            backgroundColor: Colors.black,
            appBar: AppBar(
              title: Text('App Bar!'),
              flexibleSpace: Image(
                image: AssetImage('images/bar1.jpg'),
                fit: BoxFit.cover,
              ),
              backgroundColor: Colors.transparent,
            ),
body: Container()

)

How to replace title with image in AppBar

6 Answers6

Linked