How to convert measurement

[Eduard Hasanaj]

Creating ui that support multiple resolution has been a mister for me. I do not understand how to do it in flutter. I followed this tutorial in https://sergiandreplace.com/planets-flutter-creating-a-planet-card/ that says to divide measurements with density. It looks too small.

Design is in sketch with dimensions 360x640

My device is SM J3

[Eduard Hasanaj]

I am missing resolution 360x640 from measurement sheet at material device metrics. Looks like at this resolution 1dp equals 1 px. I found it by searching stackoverflow

[Fabio de Matos Quaresma Gonçalves]

Although there are very few mentions to dp, it seems to be the units used everywhere in flutter.

In android devices with density mdpi (equivalent to 1x in iOS ecosystem, for example in devices pre-retina), 1 px = 1 dp. Now if you get xhdpi you get twice as many pixels per cm as in mdpi, so in xhdpi 2px = 1 dp.

But you shouldn't need to care at all what's the resolution in the phone, unless dealing with images, where you need to read about variants. Even there you're talking only about image quality, not how big it should show on screen: https://flutter.io/assets-and-images/#resolution-aware

You can ask your designer to use pre-retina 1px = 1 point so he won't double the pixels or anything like that. Or follow dp system from Android, which means the exact same thing. I've had interesting discussions about it, you can redirect designers to https://material.io/design/layout/understanding-layout.html#pixel-density

Your phone model is usually not important, since it has to work and look decent on any phone from let's say 5' to 7'. That's what you should focus on, unless client has specific (and often unreasonable) requests.

https://stackoverflow.com/questions/2025282/what-is-the-difference-between-px-dip-dp-and-sp

Bottom line, nobody should use pixels. 1 dp (android) = 1 point (iOS). Assume sketch is done using dp, and unless it looks unreasonable big or small you should be fine.

Em sex, 13 de jul de 2018 às 08:33, Eduard Hasanaj <eduardh...@gmail.com> escreveu:

I am missing resolution 360x640 from measurement sheet at material device metrics. Looks like at this resolution 1dp equals 1 px. I found it by searching stackoverflow

--
You received this message because you are subscribed to the Google Groups "Flutter Dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to flutter-dev...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Fabio de Matos Gonçalves

[Ian Hickson]

Flutter uses what we call "logical pixels", which are more or less the same as CSS "pixels", android "dp", iOS "points", etc, i.e. a unit that is about one dot with 96 dots per linear inch, or more precisely one dot per device-pixel-ratio number of physical pixels.

See also https://docs.flutter.io/flutter/dart-ui/Window/devicePixelRatio.html

--
Ian Hickson

😸

[Eduard Hasanaj]

If the sketch page width height is different from 360x640, measurements should be divided with density to convert to dp. Am I right?