Flutter development practice - get screen display size and physical pixel resolution

During the development process, it is often encountered that it is necessary to obtain the size and physical pixel resolution of the screen display. MediaQuery will be used here, and MediaQuery must rely on the context of BuildContext to use it.

1. MediaQuery obtains the screen display size and physical pixel resolution

MediaQuery in flutter is a class used to obtain device screen information. It can be used to obtain information such as screen width, height, pixel density, etc., so as to adapt to different screen sizes.

For example

import 'package:flutter/material.dart';
 
void main() {
    
    
  runApp(MyApp());
}
 
class MyApp extends StatelessWidget {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    Size scrSize = MediaQuery.of(context).size;
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('MediaQuery示例'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                '屏幕宽度：${
      
      scrSize.width}',
              ),
              Text(
                '屏幕高度：${
      
      scrSize.height}',
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Get screen size (logical pixel resolution)

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

Get the screenWidth and screenHeight, but to get the physical pixel resolution, we also need to use devicePixelRatio.
devicePixelRatio indicates the ratio of actual pixels to logical pixels, and is of double type.

access method

 double devicePixelRatio = MediaQuery.of(context).devicePixelRatio;

The physical pixel resolution can be obtained by multiplying the width and height of the screen by the device pixel ratio

Size scrSize = MediaQuery.of(context).size;
    double screenWidth = scrSize.width;
    double screenHeight = scrSize.width;
 double devicePixelRatio = MediaQuery.of(context).devicePixelRatio;
double canvasWidth = screenWidth*devicePixelRatio;
double canvasHeight = screenHeight*devicePixelRatio;

Logical Pixel Resolution (Logical Pixel Resolution)
is the abstract resolution used in flutter. It is a device-independent logical pixel. It represents a virtual pixel that can be controlled and used by the program, and is a general concept. Under the logical pixel resolution, the width and height of the screen are measured and tested in logical pixels, regardless of the actual weak pixel density. Taking iphone7 as an example, the logical resolution of the mobile phone is 375×667.
Physical Pixel Resolution (Physical Pixel Resolution)
is the pixel resolution available on the actual physical device, which is measured according to the physical pixel density of the device. Device pixels, or device resolution. Take iphone7 as an example, the mobile phone resolution is 750*1334.
The device pixel ratio (Device Pixel Ratio)
is also fixed on the same device, indicating the ratio of physical pixels to logical pixels of the device. The formula is: logical pixel * DPR = physical pixel. For example, DPR of iphone7= 750/375 = 2

2. Summary

Flutter development practice - get the screen display size and physical pixel resolution.

Learning records, keep improving every day.