principle
When designing UI, it will generally be designed according to a fixed size, such as360 x 690, the actual device resolution may be Google Pixel:1080 x 1920 、Google Pixel XL: 1440 x 2560 、iPhone 12 Pro Max: 1284 x 2778etc. If you write the values directly according to the design drawing during development, the final effect will be inconsistent with the design effect. At this time, you can use proportional methods to adapt.
Divide the design drawing into fixed units and define an identity for this unit, for example, it is calledw, and then by obtaining the device resolution, using the real width of the device divided by the design drawing width, you get1wThe true width represented:
1w = Real width of the device / Design drawing width
If the design size is360 x 690, then the width is360w, the real device width is 10801w = 1080 / 360 = 3。
According to the above algorithm, the corresponding device is obtained1wThe true width:
Google Pixel: 1w = 1080 / 360 = 3
Google Pixel XL： 1w = 1440 / 360 = 4
iPhone 12 Pro Max： 1w = 1284 / 360 = 3.57
According to the same algorithm, a unit of height can be defined ash, the true value of the corresponding device's height unit is obtained, as follows:
Google Pixel: 1h = 1920 / 690 = 2.78
Google Pixel XL： 1h = 2560 / 690 = 3.71
iPhone 12 Pro Max： 1h = 2778 / 690 = 4.03
After conversionw、hAfter the real value of the UI control, it can be used during the development process to set the height, width, spacing, etc. of the UI control, so that the final effect is infinitely close to the effect of the design drawing.
During the development process, width is generally used to adapt. The control height is either adaptable or the unit of width is set, and the overall height is adaptable according to the content. However, if there are special needs, you can also use height to adapt. For example, the requirements are that the banner occupies 1/4 of the screen, or the content is required to be displayed on one screen. At this time, when setting the height of the control, the height unit can be used to adapt.
Based on the above algorithm, the corresponding adaptation scheme can be implemented in the project, but in the idea of not reproducing the wheel, it can be used directly in project development.flutter_screenutilThis adapter library.
Recommended method
Direct usage method, you can initialize flutter_screenutil by passing in screen size, design drawing size and screen direction, the code is as follows:
(
BoxConstraints(
maxWidth: (context)., //Screen Width maxHeight: (context)., //Screen height ),
designSize: const Size(360, 690), // Design drawing size orientation: ); // Screen direction)
In this way, you only need to initialize before using flutter_screenutil, which is generally initialized when the root route is loaded, that is, the first page is loaded.
Note: The initialization cannot be performed in MyApp. MaterialApp has not been loaded yet, and it cannot be used to obtain the width and height of the screen.
After initialization, you can use the method provided by flutter_screenutil to obtain the adapted value for use.
The width and height and font adaptation values can be obtained through the following API.
ScreenUtil().setWidth(540) //Adap the size according to the screen widthScreenUtil().setHeight(200) //Adap the size according to the height of the screen (usually adapt to the width)ScreenUtil().radius(200) //Adjust to the smaller of the width or heightScreenUtil().setSp(24) //The font size is suitable
The passed parameters are the size on the design drawing. Examples in actual use are as follows:
Container(
width: ScreenUtil().setWidth(200),
height: ScreenUtil().setHeight(540),
child: Text("Hello", style: TextStyle(fontSize: ScreenUtil().setSp(24)),),
);
For flutter_screenutil, the num type extended by dart:
Each of the above methods corresponds to the following:
ScreenUtil().setWidth(540) => ScreenUtil().setHeight(200) => ScreenUtil().radius(200) => ScreenUtil().setSp(24) =>
Examples of usage after corresponding modifications:
Container(
width: ,
height: ,
child: Text("Hello", style: TextStyle(fontSize: ),),
);
Note: !=Unless the resolution ratio of the screen is the same as the scale of the design drawing, so to set the square, remember to use the same units. If the same w and h are set, it may be a rectangle.
In addition to the above 4-clock extension attributes, sm, sw and sh are also provided.
sm: Take the value with a smaller value of the numerical value itself and sp, such as: take the value of the sum of 12 for comparison, and take the smaller value.
sw:screen width abbreviation, which represents the screen width, and the function is to return the value according to the screen width ratio. If 0.2sw returns 20% of the screen width, it is the entire screen width
sh: the abbreviation of screen height, that is, screen height, which acts similar to sw, and returns the screen height value of the specified proportion. For example, the height of the entire screen.
Using sp as font unit will change with the system font scaling by default. If you do not want the font to change with the system scaling, you can set textScaleFactor to 1.0 to achieve it. You can set MaterialApp globally or set Text separately in the project.
Global settings:
MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter_ScreenUtil',
theme: ThemeData(
primarySwatch: ,
),
builder: (context, widget) {
return MediaQuery(
///Set text size does not change with system settings data: (context).copyWith(textScaleFactor: 1.0),
child: widget,
);
},
home: HomePage(title: 'FlutterScreenUtil Demo'),
),
Set separately:
Text("text", textScaleFactor: 1.0)
This is the article about the detailed explanation of the Flutter application framework to build and implement screen adaptation solutions. For more related Flutter screen adaptation content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!