Repository navigation
BoxFit.none does not take into account image scale, images always pixelated and scaled incorrectly #18682
Description
My application provides 3 background image variants (1.0x, 2.0x, 3.0x) with a size of 48x48 which are used as repeatable background images, for example:
new Container(
width: 200.0
height: 200.0,
decoration: new BoxDecoration(
image: new DecorationImage(
image: new AssetImage('images/test.png'),
repeat: ImageRepeat.repeat,
fit: BoxFit.none,
),
),
)BoxFit.none is used to keep the original size of the image (48x48 units)
Depending on the device pixel ratio, Flutter chooses the correct image variant (3.0x in the screenshot) so that the images are sharp even on high resolution displays.
The problem is that the painting logic does not take into account the scale of the image, it just makes them bigger. For example, on a 3.0x device, the 3.0x image variant (which has a real pixel size of 144x144) is scaled up to a size of 144x144 units, which equals 432x432 real pixels = a blurry pixel mess.
This is a serious bug which makes the image variant system unusable.
The bug also occurs when BoxFit.none or BoxFit.scaleDown are used in a regular Image.asset widget:
new Image.asset(
'images/test.png',
height: 200.0,
fit: BoxFit.none,
repeat: ImageRepeat.repeat,
)Example application (boxfit branch): https://github.com/sir-boformer/flutter_image_bugs/tree/boxfit
| Current Behavior: | Expected Behavior: |
|---|---|
 |
 |
Activity
sir-boformer commentedon Jun 21, 2018
It's probably this line that needs to be changed:
flutter/packages/flutter/lib/src/painting/decoration_image.dart
Line 369 in 09276be
zoechi commentedon Jun 22, 2018
cc @Hixie
DanielSmith1239 commentedon Jun 24, 2018
I'm having this issue right now...
sir-boformer commentedon Aug 18, 2018
It seems like @Hixie is to blame for it.
I thought about contributing a fix for this. I'm just afraid that I'm unable to provide test cases (like golden tests). How would I go about that?
Hixie commentedon Aug 19, 2018
we have a wiki page that describes how to create golden tests: https://github.com/flutter/flutter/wiki/Writing-a-golden-file-test-for-package%3Aflutter
github-actions commentedon Sep 2, 2021
This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of
flutter doctor -vand a minimal reproduction of the issue.