Load images for tablet devices screen doesn't show appropriate pixel ratio of images Flutter

user_9727907 0
Viewed 52

I followed this docs Flutter guideline to let Flutter load resolution-appropriate images for the current device pixel ratio.

what I did folders like this:

assets/icons/my_icon.png
assets/icons/1.5x/my_icon.png
assets/icons/2.0x/my_icon.png
assets/icons/3.0x/my_icon.png
assets/icons/4.0x/my_icon.png

And call it like this:

Image.asset("assets/icons/my_icon.png"),

It is work fine (get appropriate pixel ratio image) for current mobile screens, but it doesn't work on iPad & tablet devices screen (doesn't get appropriate pixel ratio image which it should be big image like image in 4.0x or in 3.0x folders).

While when I add icon manually (from 4.0x or 3.0x folders) it work fine, show bigger size of icon like this:

 Image.asset("assets/icons/4.0x/my_icon.png"),

Why it is work fine on mobile screens, and doesn't work on iPad & tablet devices screen.

flutter-layout dart flutter android ios
2 Answers

the 3.0x and 4.0x has nothing to do with the size of the screen but the pixel ratio. Which means the screen density: how many pixels there are in an inch for example. Chances are that it does choose the right image, but the tablets simply don't have 3.0x or 4.0x pixel ratio that you think they have.

user_15148610

So the thing is that .png images pixelate as screens get bigger, so to target bigger screen sizes, you need to adjust the image to look the same on that screen size, which could be really daunting.

The best fix so far has been using .svg because they do not pixelate, because it is code drawing on a screen and it will draw on any screen with respect to the size of it.

user_116230010
Related