background

There are no units of length in a flutter, so how does that fit different screens? This paper is mainly to provide a learning horizon for students who develop front-end flutter and understand the original adaptation mode.

Mobile adaptation

Noun explanation:

Physical pixel: the actual resolution of the phone; Logical pixel (also known as device independent pixel DIP): A device pixel ratio conversion to fit a concept of HD screen abstraction package; Device Pixel ratio (DPR): physical pixel/logical pixel; Pixel density (PPI): the number of pixels included per inch; The higher the PPI, the clearer the screen;Copy the code

Ios/Android/H5 / FLUTTER length unit and calculation formula:

Android (dp): 1 dp= (ppi/160)px ios(pt): 1 pt = (ppi/163)px H5 (PX): 1px(CSS pixels) = physical pixels/scale flutter 1dp = (ppi/160)pxCopy the code

It can be seen that the adaptation of Android /ios/ Flutter is adapted by PPI. Let’s take a look at some examples of how ppi adaptation works (a 200px by 750px visual example):

// iPhone X/XS 200pt = (462/163) * 200 = 566px // Physical pixel multiplied by pixel ratio @ 3,600px, 34px difference; //iphone6 200pt = (326/163) * 200 = 400px // Physical pixelx pixel ratio @2, 400px, no difference; // HUAWEI P10 200db = (432/160) * 200 = 540px // Physical pixel multiplied by pixel ratio @3, 600px, difference 60px; Oppo A37 200db = (293/160) * 200 = 366.25px // Physical pixel multiplied by pixel ratio @2, 400, 34px difference;Copy the code

For ios, although there is a 34px difference on iphonex, in fact, the error is only 34/750 ~= 0.04 according to the actual proportion. In fact, the difference is very difficult to see at this point. For Android 60px/1080px = 0.08, the difference isn’t that big either; Based on the current analysis, ppi is used for adaptation, most of the gap is not big, but there are still a little bit of mismatch in different versions (but in fact, the front-end students all know that in the actual development, most elements are arranged in alignment layout, so it is not easy to see the gap). For H5, the current main scheme is to scale by the proportion of the best viewport and visual draft. For details, please refer to my other h5 adaptation article. In fact, if you only need to develop the APP with FLUTTER without considering THE H5, you can use the default units of FLUTTER. But if you consider THE H5, you need to use the H5 solution because the browser cannot find ppi(you can also hack the PPI of all mobile phone models, but in the long run, it is not conducive to update).

Responsive layout

Flex (row, column) set the flex value, e. LLDB.

body: Row(
  children: [
    Expanded(
      flex: 3,
      child: Container(color: Color(0xFFFF6666), child: Center(child: Text("30%", style: Theme.of(context).textTheme.headline2,),),),
    ),
    Expanded(
      flex: 7,
      child: Container(color: Color(0xFFFFFF66), child: Center(child: Text("70%", style: Theme.of(context).textTheme.headline2,),)),
    )
  ],
),
Copy the code

Second, through the media query calculation (query parent element size);

Width: MediaQuery) of (context). The size, width * 0.3Copy the code

Three, through their own media query to achieve a base class, each length calculation through this way to calculate; (The most common tripartite library is flutter_screenUtil)

The problem record

What is the difference between CSS (PX) and physical pixels? CSS (PX) is a logical pixel, and the conversion formula to physical pixels is physical pixels = CSS pixels * @ scaling factor

2 why does H5 not use ios(PT)/ Android (DP) as the unit of calculation? No relevant documents have been found for the time being. It is estimated that there may be the following reasons:

1. There is no API to query PPI in the browser; 2. More accurate values can be obtained by comparing visual draft/ideal viewport;Copy the code

Reference documentation

1 Flutter screen Adaptation: juejin.cn/post/684490… 2 flutter. Dev/docs/develo… 3 flutter_screenUtil: github.com/OpenFlutter…