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

Question

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

Solution

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.