Has Flutter changed how it handles an Image as AppBar title?

Question

In my Flutter app I am using a png image as the title inside the AppBar. It seems in the last 24h to have changed how it handles the resizing of the image.

Over the last month or two this has been working fine: inside my MaterialApp my StatefulWidget returns an AppBar inside a Scaffold, which has its title set to Image.asset(assetName). The Image was automatically being scaled down properly to fit neatly within the AppBar on-screen, once I had added a bit of padding.

Yesterday, this broke. I've checked the diffs and nothing has changed that would obviously affect this part of the code since when it was working. I now have the image being shown at full size, which is about 3 times too big for the space available and so it's being cropped.

I've tried adding fit: BoxFit.contain, and indeed every other possible BoxFit option - absolutely no difference.

I have ended up using height: AppBar().preferredSize.height * 0.6 on the Image as a workaround.

return Scaffold(
      appBar: AppBar(
        title: Padding(
          padding: EdgeInsets.symmetric(
                     vertical: 10,
                   ),
            child: Image.asset(kLogoImage, height: 
                     AppBar().preferredSize.height * 0.6),
                   ),
...

But I don't understand why this has suddenly changed, without my seeming to have done anything that affects it. Has there been a shift in Flutter itself somehow that's broken this??

Check if this change 8 days ago could have made that happen: https://github.com/flutter/flutter/pull/42936 — Pablo Barrera, Oct 26 '19 at 06:41

score 2 · Answer 1 · answered Nov 11 '19 at 19:49

To restore the original AppBar layout behavior, wrap the AppBar's title in a SizedBox with height: kToolbarHeight.

appBar: AppBar(
  title: SizedBox(
    height: kToolbarHeight,
    child: Image.asset(kLogoImage),
  ),
),

The previous example introduced 10 pixels of vertical padding, so:

appBar: AppBar(
  title: SizedBox(
    height: kToolbarHeight,
    child: Padding(
      padding: EdgeInsets.symmetric(vertical: 10),
      child: Image.asset(kLogoImage),
    ),
  ),
),

Also discussed here: https://github.com/flutter/flutter/issues/44550#issuecomment-552586000.

score 0 · Accepted Answer · answered Oct 26 '19 at 06:53

0

This is indeed a change in Flutter, as per Pablo's comment above.

answered Oct 26 '19 at 06:53

Jonathan

341
3
14

Has Flutter changed how it handles an Image as AppBar title?

2 Answers2