How to replace title with image in AppBar

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

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

  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'))
            ],

          ),
  )

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).

1. Create a folder (e.g. 'themes') in your /lib path.

2. 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.)

3. 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);
   

4. 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,        
   ),
   

5. 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.

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)),
    ],
  ),
);

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()

)

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