Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter MediaQuery.of(context).size.width values are different than real screen resolution

in my Flutter application I am trying to get the real screen width (that can naturally be different on each device).

I am using MediaQuery.of(context).size.width but I've noticed that the values returned do not match the real screen resolution.

For instance,

  • On an simulator iPhone 11 Pro Max (that has resolution 2688 x 1242) I get MediaQuery.of(context).size.width= 414

  • On an emulator Nexus XL (that has resolution 1440 x 2560) I get MediaQuery.of(context).size.width = 411.42857142857144

  • On a real device iPhone 7 (that has resolution 1,334 x 750) I get MediaQuery.of(context).size.width = 375

Does anyone know why the value returned by MediaQuery differ from the real screen resolution in pixels?

Thanks

like image 331
Miha Avatar asked Jan 04 '20 12:01

Miha


People also ask

How do I use flutter in MediaQuery?

MediaQuery provides a higher-level view of the current app's screen size and can also give more detailed information about the device and its layout preferences. In practice, MediaQuery is always there. It can simply be accessed by calling MediaQuery. of in the build method.


Video Answer


1 Answers

According to the size property's documentation :

The size of the media in logical pixels (e.g, the size of the screen).

Logical pixels are roughly the same visual size across devices. Physical pixels are the size of the actual hardware pixels on the device. The number of physical pixels per logical pixel is described by the devicePixelRatio.

So you would do MediaQuery.of(context).size.width * MediaQuery.of(context).devicePixelRatioto get the width in physical pixels.

like image 169
MickaelHrndz Avatar answered Oct 17 '22 17:10

MickaelHrndz