Flutter_cached_network_image: "fit" property doesn't work on 1.1.2+1

[elricym]

Images are always scaled to the exact size of the widget, which means fit property may be bypassed. I think "ScaledFileImage" may stretch the image automatically. Thank you.

[aleor]

Got this problem too with 1.1.2.
It's either tries to fit the whole image or just shows the exact part of the image, defined by width and height provided.

[ikicodedev]

I have the same problem with version 1.1.2. Any other workaround?

[jicg]

me too

[janjaso]

Same issue, can be reproduced by getting any portrait image, like a tall building. You'll see its squished, looks like any kind of fit is ignored other than BoxFit.none. Below is reproducible code example.

CachedNetworkImage(
        imageUrl: "https://upload.wikimedia.org/wikipedia/commons/8/85/Tour_Eiffel_Wikimedia_Commons_%28cropped%29.jpg",
        placeholder: (context, url) => CircularProgressIndicator(),
        fit: BoxFit.cover, 
        width: MediaQuery.of(context).size.width, //use full width
        height: MediaQuery.of(context).size.height / 2, // use half height
     ),

[lovebzhou]

set width or height, not both while using BoxFix.cover, it works for me

[janjaso]

set width or height, not both while using BoxFix.cover, it works for me

Just because it works for your specific case doesn't mean its not a bug. Your work-around doesn't actually work at all.

If you set width only (on portrait photo) the result is that the image now occupies too much vertical space on the viewport, so you have to scroll 2 device-lengths to see the whole photo which is the worst user experience I can imagine its horrific.
If you set height only (on portrait photo) the result is that the image is now very long and thin, it now occupies HALF the width of the device (due to height bounding) and you have a horrible empty white space on one side, or if you center it, white space on either side (which isnt boxfit.cover at all, look at the docs to see what it does).

This is broken. This does not occur if you use Image.network(src) or FadeInImage.assetNetwork or similar and it also works fine in 1.1.1 and older.

Edit: I have tested this, and it works fine on 1.1.1, looks like the regression bug was introduced with v 1.1.2, the work-around is to just downgrade to 1.1.1
Most likely this is was introduced from

Scale image to size when showing in widget.

[glasody]

set width or height, not both while using BoxFix.cover, it works for me

Just building on top of that reply, wrapping the CachedNetworkImage inside a SizedBox then defining the height for network image and width for sized box. Therefore keeping both width and height to what you want.

SizedBox(
     width: MediaQuery.of(context).size.width - 14,
     child: CachedNetworkImage(
         height: 200,
         fit: BoxFit.cover,
         ...
     )
)

[lovebzhou]

set width or height, not both while using BoxFix.cover, it works for me

Just building on top of that reply, wrapping the CachedNetworkImage inside a SizedBox then defining the height for network image and width for sized box. Therefore keeping both width and height to what you want.

SizedBox(
     width: MediaQuery.of(context).size.width - 14,
     child: CachedNetworkImage(
         height: 200,
         fit: BoxFit.cover,
         ...
     )
)

In addition, before displaying the picture, i already know the width and height of the picture, and set the width or height according to the situation.

[renefloor]

This is indeed a bug.
My proposed solution is to not scale the image when using a fit other than BoxFit.fill. This will hurt the performance a bit, but at least boxfit works again.

[elricym]

@renefloor Since you don't have the original size of the provided image, it's no possible to scale to the exact size of it on screen. But I think this feature is sort of over-designed, developer should consider it by themselves including compressing images.
BTW, "scale" property should be exposed, right? Since CachedNetworkImageProvider does have it.

[qq326646683]

same issue, I have to back to v1.1.1

[renefloor]

Just reverted #238 in 1.1.3 and 2.0.0-rc.1

[elricym]

Thank you @renefloor . Just in case, can I ask if scale is missing in CachedNetworkImage or not?