I believe that every mobile developer can't avoid this problem, that is, screen adaptation

At present, there are many mobile devices, and the mobile screen of different devices is also different.

At present, mobile terminal development should be adapted to different devices, whether it is mobile native development, applet, H5 page.

So in this article, let's talk about screen adaptation. Ali P7 told me the adaptation scheme!

The most important point: the width is generally calculated according to the screen width. Depending on the situation, the height of the text is not limited according to the UI!!!

Use more adaptive components like Expanded!!

We can adapt according to the device information:

Get some information on the screen through MediaQuery:

// 1. Media query information
final mediaQueryData = MediaQuery.of(context);

// 2. Get width and height
final screenWidth = mediaQueryData.size.width;
final screenHeight = mediaQueryData.size.height;
final physicalWidth = window.physicalSize.width;
final physicalHeight = window.physicalSize.height;
final dpr = window.devicePixelRatio;
print("screen width:$screenWidth height:$screenHeight");
print("resolving power: $physicalWidth - $physicalHeight");
print("dpr: $dpr");

// 3. Height of status bar
// Screen with bangs: 44 screen without bangs is 20
final statusBarHeight = mediaQueryData.padding.top;
// Screen with bangs: 34 screen without bangs 0
final bottomHeight = mediaQueryData.padding.bottom;
print("status bar height: $statusBarHeight Bottom height:$bottomHeight");

We have two ways to adapt:

1. Assemble according to the equipment information, so as to better realize the functions you need

2. Using a third-party library: flutter_screenutil (it is also very powerful and easy to use)

Let's talk about both ways, ha ha

1. Assemble according to the equipment information

import 'package:flutter/material.dart';
import 'dart:ui';

class ScreenAdapt {
  //Screen parameter acquisition api
  static MediaQueryData mediaQuery = MediaQueryData.fromWindow(window);
  static double screenwidth; //Device screen width
  static double screenheight; //Device screen height
  static double topheight; //Top blank height
  static double bottomheight; //Bottom blank height
  static double devicepixelratio = mediaQuery.devicePixelRatio; //Resolution ratio
  static var screenratio; //Screen width ratio
  //Initialize uinumber: UI design diagram, such as 750, 1920, etc
  static initialize(int uinumber) {
    screenwidth = mediaQuery.size.width;
    screenheight = mediaQuery.size.height;
    int uiwidth = uinumber is int ? uinumber : 750; //The default is 1920 ui design drawings
    screenratio = screenwidth / uiwidth; //Screen width ratio: device width: ui design width
  }

  //Actual filling length
  static px(number) {
    if (!(screenratio is double || screenratio is int)) {
      ScreenAdapt.initialize(750);
    }
    return number * screenratio; //Returns the processed length value
  }

  //Get device screen width
  static screenWidth() {
    screenwidth = mediaQuery.size.width;
    return screenwidth;
  }

  //Get device screen height
  static screenHeight() {
    screenheight = mediaQuery.size.height;
    return screenheight;
  }

  //Gets the top blank height of the device
  static topHeight() {
    topheight = mediaQuery.padding.top;
    return topheight;
  }

  //Gets the blank height at the bottom of the device
  static bottomHeight() {
    bottomheight = mediaQuery.padding.bottom;
    return bottomheight;
  }
}

Use example

Container(
              width: ScreenAdapt.px(1500),
              //height: ScreenAdapt.px(800), try not to set the height
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(23.0),
                  image: DecorationImage(
                      image: new NetworkImage(
                          "https://i.henghajiang.com/login_img.png"),
                      fit: BoxFit.none)),
            ),

Pay attention to what the length and width here refer to

This package is relatively simple. You can diy it yourself

2. Using a third-party library: flutter_screenutil

(1) Import steps:

​ pubspec. Introduce the latest in yaml:

​ flutter_screenutil: ^5.0.0 # screen adaptation (this version is fully functional)

(2) Initialization:

It must be initialized in the build of State

[the external chain image transfer fails. The source station may have an anti-theft chain mechanism. It is recommended to save the image and upload it directly (img-Rin8xlYX-1627891457503)(C:\Users\Taxze\Desktop\image-20210802151827258.png)]

In versions before 4.0.0, the initialization is as follows:

ScreenUtil.init(context, width: 750, height: 1334, allowFontScaling: false);

Then it was like this:

ScreenUtil.init(
  BoxConstraints(
      maxWidth: MediaQuery.of(context).size.width,
      maxHeight: MediaQuery.of(context).size.height),
  designSize: Size(750, 1334),
);

(3) Mode of use

Before dart version 2.0.0:

Container(
  width:ScreenUtil().setWidth(200)
  height:ScreenUtil().setHeight(180)
}

After dart version 2.0.0 (including 2.0.0):

Container(
  width:200.w
  height:180.h
}

Equal length and width:

Container(
  width:200.w
  height:200.w
)

Other APIs:

ScreenUtil.pixelRatio       //Pixel density of the device
ScreenUtil.screenWidth      //Equipment width
ScreenUtil.screenHeight     //Equipment height
ScreenUtil.bottomBarHeight  //The distance between the bottom safety zone is suitable for those with buttons under the full screen
ScreenUtil.statusBarHeight  //The height of the status bar and the bangs screen will be higher in px
ScreenUtil.textScaleFactory //System font scaling
   
ScreenUtil.getInstance().scaleWidth  // Ratio of dp of actual width to px of design draft
ScreenUtil.getInstance().scaleHeight // Ratio of dp of actual height to px of design draft

Isn't it very simple! Remember this sentence: the width is generally calculated according to the screen width. Depending on the situation, the height of the text is not limited according to the UI!!!

With adaptive components, it perfectly fits the screen!!

Welcome to leave a message to correct ~ you might as well give a praise ha ha

I'm a humorous programmer. I'll see you next time~

Add me as your friend and get the source code and Flutter learning materials~

Join us, study together and make progress together~