Fit the Flutter screen size

preface

Modern mobile phones have different screen sizes, which makes writing layouts look different on different mobile devices. In order to achieve a set of code all mobile phone experience consistent effect, need to do size adaptation.

This article will take you 3 minutes to quickly explain how to fit

A recent iPhone size chart

Implementation method

How to display the same scale on different screens?

For example, the designer gave a design drawing of iphone13 as a standard size. At this time, there is a 50*50 square logo. What size should we change into on the screen of iphone11 to keep the same proportion?

50/390=x/375

X = 48.076923 * 375 = 50/390…

x=50*(375/390)

When evaluating, 375/390 is always fixed, so we refer to 375/390 as the horizontal ratio of the current screen width to the design screen width. Every time we want to know what the value on the design diagram is on the user’s device, we just multiply this ratio.

Calculation formula: actual size = UI size * device width/design drawing width

import 'dart:math';

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

class SizeConfig {
  static MediaQueryData _mediaQueryData;
  /// The device width
  static double screenWidth = 0;
  /// Equipment is highly
  static double screenHeight = 0;
  /// The direction of
  static Orientation orientation;
  /// Design width
  static double inputHeight = 390;
  /// Design width
  static double inputWidth = 844;
  static EdgeInsets padding;

  /// The ratio of actual height to UI design
  static double get scaleWidth => screenWidth / inputWidth;

  static double get scaleHeight => screenHeight / inputHeight;

  static double get scaleText => min(scaleWidth, scaleHeight);
	
  /// It should be initialized before use,
  static void init(BuildContext context, double w, doubleh) { inputWidth = w; inputHeight = h; _mediaQueryData = MediaQuery.of(context); screenWidth = _mediaQueryData.size.width; screenHeight = _mediaQueryData.size.height; orientation = _mediaQueryData.orientation; padding = _mediaQueryData.padding; }}// Get the proportionate height as per screen size
double getProportionateScreenWidth(num inputWidth) {
  return inputWidth * SizeConfig.scaleWidth;
}

// Get the proportionate height as per screen size
double getProportionateScreenHeight(num inputHeight) {
  return inputHeight * SizeConfig.scaleHeight;
}


Copy the code

extension

Num is an extension of flutter_screenUtil. Instead of writing a long list of method names, use 1.2.w,1.h,1.r instead of the library. Just copy the two pieces of code, create a file in your utils directory, and reference them

/// To extension of num, can directly use 1.2 w instead of in the form of getProportionateScreenWidth (1.2)
extension SizeExtension on num {
  ///[ScreenUtil.setWidth]
  double get w => getProportionateScreenWidth(this);

  ///[ScreenUtil.setHeight]
  double get h => getProportionateScreenHeight(this);

  ///[ScreenUtil.radius]
  double get r => this * SizeConfig.scaleText;

  ///Multiple of screen width
  ///Multiple of screen width
  double get sw => SizeConfig.screenWidth * this;

  ///Multiple of screen height
  ///Multiple of screen height
  double get sh => SizeConfig.screenHeight * this;
}
Copy the code

knowledge

The screen size

Strictly speaking, screen size is actually defined by both physical size and display resolution. When we talk about screen sizes for mobile phones and Pad devices today, we only refer to physical screen sizes. If the physical size of a mobile phone screen is 5.0 inches, this is the diagonal length of the screen.

Screen resolution

Screen resolution refers to the precision of the screen image, is the display can display the specific value of pixels. For example, a mobile phone with a nominal resolution of 400 x 800 means that the screen has 400 pixels horizontally and 800 pixels vertically. Since dots, lines and planes on a screen are all made up of pixels, the more pixels a screen has, the more refined the picture. The higher the resolution, the more information is displayed per unit area, and the more content we can see.

Proportion of the screen

Screen ratio refers to the ratio of width and height of the screen, today more refers to the proportion of the resolution, the screen ratio = screen horizontal/vertical screen resolution In addition, in all kinds of equipment, also have some of the more commonly used ratio between platform, and also recommend the corresponding Settings or platform application development using the recommended ratio. Using the recommended ratio can make users more comfortable when using our App and bring better use experience.

DPI

Dots Per Inch (DPI), the number of Dots Per Inch, originally used to measure the accuracy of a printer or mouse. In terms of screen, PPI is generally used to indicate accuracy.

PPI

Pixels Per Inch (PPI) refers to the number of Pixels Per Inch. A higher PPI indicates that each pixel on a screen is closer to each other and has a higher density of Pixels, making screen content more delicate and realistic. At more than 300 PPI, the screen is considered retinal, and it is generally difficult for the human eye to detect the difference.

Screen Density

Density is proposed by Android version 1.6 (Android API Level 4) to accommodate different screen sizes. It represents the number of display points per inch (logical value) and is expressed in DPI. In Android native development, it is common to use dp/dip/ SP to define the width and height of view and text. When Density is 160 DPI, 1px = 1dp; when Density is 320 DPI, 2px = 1dp

Ratio DPR (devicePixelRatio)

Sometimes called device pixel ratio, this is the ratio of device pixel DP to device independent pixel DIps, that is, DPR = DP/DIps

Logical resolution

Logical resolution can also be used as display resolution in the APICloud app. The logical resolution and the screen resolution are different in today’s mainstream devices. The formula is: Logical resolution = screen resolution/screen magnification in Android system, according to the definition of DP, 1dp = 1px, Density is 160, the formula is: If the iPhone 4 screen resolution is 640 x 960, the logical resolution is: 640/2 x 960/2 = 320 x 480 While mi 2’s screen resolution is 720 x 1280, Density is 320, logical resolution is: 720 / (320 / 160) x 1280 / (320 / 160) = 360 x 640