9

In Android we have variety of dpi drawable folders so we add background images in that based on resolution. Same like in iOS we add in 1x, 2x and 3x based on screen sizes. But how we will add multi resolution images in Flutter assets?

Ex:

Android

drawable-hdpi
 - login_background.jpeg
drawable-mdpi
 - login_background.jpeg
drawable-xhdpi
 - login_background.jpeg
drawable-xxhdpi
 - login_background.jpeg
drawable-xxxdpi
 - login_background.jpeg

How we add multiple drawables in flutter to support multiple screen sizes without image stretching or scaling?

rjkolli7
  • 153
  • 3
  • 9
  • you can see my answer here: https://stackoverflow.com/questions/53864380/how-to-pick-an-asset-according-to-screen-density-dpi-size/63971109#63971109 – Mina Farid Sep 19 '20 at 16:57

2 Answers2

13

Flutter defines ratios like ios so, for example, you can create a folder named 0.75x under the assets/images for ldpi images. Other densities are as below

Dentisity  Flutter pixel ratio
ldpi        0.75x
mdpi        1.0x
hdpi        1.5x
xhdpi       2.0x
xxhdpi      3.0x
xxxhdpi     4.0x

See documentation here

MJ Khan
  • 1,696
  • 3
  • 21
  • 36
Umut ADALI
  • 1,146
  • 1
  • 14
  • 31
  • So if i use assets/2.0x/icon.png for hdpi, and assets/icon.png for mdpi, then what should i use for ldpi ? since the lowest one 1.0x isnt defined by additional folder and it's considered as lowest. – Razmik Gharibyan Feb 11 '21 at 15:00
  • You can create 0.75x folder under images like 'images/0.75x/my_icon.png' – Umut ADALI Feb 11 '21 at 21:00
2

How Flutter handles multi-resolution images is explained here.

It comes basically down to this:

AssetImage understands how to map a logical requested asset onto one that most closely matches the current device pixel ratio. In order for this mapping to work, assets should be arranged according to a particular directory structure: (...)

An example:

.../my_icon.png
.../2.0x/my_icon.png
.../3.0x/my_icon.png
Sven
  • 3,204
  • 1
  • 20
  • 28