How does Flutter get the resolution of the screen and the resolution of the actual canvas

How does Flutter get the resolution

In Flutter, you can use MediaQuery to get the resolution of the screen and the resolution of the actual canvas.

To get the screen's resolution, you can use the MediaQuery.of(context).size property, which returns a Size object containing the screen's width and height. Here is an example of getting the screen resolution:

Size screenSize = MediaQuery.of(context).size;
double screenWidth = screenSize.width;
double screenHeight = screenSize.height;

To get the actual canvas resolution, you can use the MediaQuery.of(context).devicePixelRatio property, which returns a double representing the ratio of actual pixels to logical pixels. You can get the actual canvas resolution by multiplying the screen width and height by the device pixel ratio. Here's an example of getting the actual canvas resolution:

dart

Size screenSize = MediaQuery.of(context).size;
double devicePixelRatio = MediaQuery.of(context).devicePixelRatio;
double canvasWidth = screenSize.width * devicePixelRatio;
double canvasHeight = screenSize.height * devicePixelRatio;

Note that MediaQuery needs to be used in a context with a valid BuildContext, such as in the build method or in the initState method. If you use MediaQuery outside of the build method, you need to make sure to provide a valid BuildContext.

It should be noted that the obtained resolution is the logical pixel resolution and the actual canvas resolution, not the
hardware resolution of the physical device.

    debugPrint('screen size: ${MediaQuery.of(context).size.width},${MediaQuery.of(context).size.height},${MediaQuery.of(context).devicePixelRatio}');

The printed results are as follows:

Logical pixel resolution and actual canvas resolution

Logical pixel resolution and actual canvas resolution are two important concepts related to screen display in Flutter.

Logical pixel resolution (

Logical Pixel Resolution: Logical Pixel Resolution is the abstract resolution used by Flutter applications, which is device-independent and measured in units of logical pixels. At logical pixel resolution, the width and height of the screen are measured in logical pixels, regardless of the actual physical pixel density.

Actual canvas resolution

Actual Canvas Resolution (Physical Pixel Resolution): The actual canvas resolution is the pixel resolution available on the actual physical device, which is measured according to the physical pixel density of the device. At the actual canvas resolution, the width and height of the screen are measured in actual physical pixels.

The relationship between the logical pixel resolution and the actual canvas resolution is determined by the Device Pixel Ratio. The device pixel ratio is the proportional relationship between logical pixels and actual physical pixels. For example, if the device pixel ratio is 2.0, the relationship between logical pixel resolution and actual canvas resolution is 1 logical pixel to 2 actual physical pixels.

In Flutter, the logical pixel resolution (MediaQuery.of(context).size) and device pixel ratio (MediaQuery.of(context).devicePixelRatio) can be obtained through MediaQuery. The actual canvas resolution can be obtained by multiplying the logical pixel resolution by the device pixel ratio.

Understanding the concept of logical pixel resolution and actual canvas resolution can help us correctly handle the size and layout of the screen when developing a Flutter application, so as to obtain a consistent display effect on different devices.

In the above example, the printed logical pixel resolution is 1280X720; the device pixel ratio is 1.5, then the actual physical pixel resolution is 1280 1.5X720 1.5 is 1920X1080.