<> preface :

Now there are more and more mobile phone brands and models , As a result, when we usually write the layout, we will display different effects on different mobile devices ,

For example, we have a design draft View Is the size of 300px, If you write directly 300px, It may display normally in the current device , But when it comes to other devices, it may be smaller or larger , This requires us to adapt the screen .


Android native words have their own adaptation rules , You can create different folders according to different sizes , The system will take the corresponding size layout according to the current equipment size . and flutter There are no adaptation rules , And the original one is more complicated , This requires us to adapt the screen ourselves .

Click direct github address <https://github.com/OpenFlutter/flutter_ScreenUtil>
If it helps , Please give me one star

<>flutter_ScreenUtil

flutter Screen adaptation scheme

github: https://github.com/OpenFlutter/flutter_ScreenUtil
<https://github.com/OpenFlutter/flutter_ScreenUtil>
csdn Introduction to Blog Tools :https://blog.csdn.net/u011272795/article/details/82795477
<https://blog.csdn.net/u011272795/article/details/82795477>

<> usage method :

<> Installation dependency :

Please check the latest version before installing
dependencies: flutter: sdk: flutter # Add dependency flutter_screenutil: ^0.4.2
<> Import packages wherever they are used :
import 'package:flutter_screenutil/flutter_screenutil.dart';
<> Initialize set size

Please set the width and height of the design before use , Width and height of incoming design ( Company px)

It must be there MaterialApp Of home Page setup in ( That is, the entry file , Set it only once ), To ensure that the appropriate size is set before each use :
// Setting the fit size ( Fill in the screen size of the device in the design draft ) If the design draft is based on iPhone6 The size of the design (iPhone6 750*1334)
ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);
<> use :

<> Fit size :

The px size :

Fit according to screen width width: ScreenUtil().setWidth(540),

Fit according to screen height height: ScreenUtil().setHeight(200),

be careful

Height also depends on setWidth To do the adaptation can ensure no deformation ( When you want a square )

setHeight The main method is to adapt in height , Before you want to control UI Use when the height of the previous screen is the same as the actual display .

for example :
// rectangle : Container( width: ScreenUtil().setWidth(375), height:
ScreenUtil().setHeight(200), ), // If you want to show a square : Container( width:
ScreenUtil().setWidth(300), height: ScreenUtil().setWidth(300), ),
<> Adaptive font :
ScreenUtil().setSp(28) // Incoming font size , According to the system's “ font size ” Auxiliary options to zoom
ScreenUtil().setSp(28,false) // Incoming font size , Not according to the system “ font size ” Auxiliary options to zoom for example: Text(
'My font size is 28px and will not change with the system.', style: TextStyle(
color: Colors.black, fontSize: ScreenUtil().setSp(28, false) ) ),
<> Other relevant api:
ScreenUtil.pixelRatio // Pixel density of the device ScreenUtil.screenWidth // Equipment width
ScreenUtil.screenHeight // Equipment height ScreenUtil.bottomBarHeight
// Bottom safety zone distance , Suitable for the full screen with buttons ScreenUtil.statusBarHeight // Status bar height Liu Haiping will be higher Company px
ScreenUtil.textScaleFactory // System font scaling ScreenUtil().scaleWidth //
Of actual width dp And design draft px The proportion of ScreenUtil().scaleHeight // Actual height dp And design draft px The proportion of // Import import
'package:flutter_screenutil/flutter_screenutil.dart'; ... @override Widget
build(BuildContext context) { // Setting the fit size ( Fill in the screen size of the device in the design draft )
If the design draft is based on iPhone6 The size of the design (iPhone6 750*1334) ScreenUtil.instance = ScreenUtil(width:
750, height: 1334)..init(context); print(' Equipment width :${ScreenUtil.screenWidth}');
//Device width print(' Equipment height :${ScreenUtil.screenHeight}'); //Device height
print(' Pixel density of the device :${ScreenUtil.pixelRatio}'); //Device pixel density print(
' Bottom safety zone distance :${ScreenUtil.bottomBarHeight}'); //Bottom safe zone distance,suitable
for buttons with full screen print( ' Status bar height :${ScreenUtil.statusBarHeight}px');
//Status bar height , Notch will be higher Unit px
print(' Of actual width dp Draft design and px The proportion of :${ScreenUtil().scaleWidth}');
print(' Actual height dp And design draft px The proportion of :${ScreenUtil().scaleHeight}'); print(
' The ratio of the width and font size to the enlargement of the design draft :${ScreenUtil().scaleWidth * ScreenUtil.pixelRatio}'); print(
' The ratio of the height to the magnification of the design draft :${ScreenUtil().scaleHeight * ScreenUtil.pixelRatio}');
print(' Font scaling of the system :${ScreenUtil.textScaleFactory}'); return new Scaffold( appBar:
new AppBar( title: new Text(widget.title), ), body: new Center( child: Column(
crossAxisAlignment: CrossAxisAlignment.center, children: <Widget>[ Row(
children: <Widget>[ Container( width: ScreenUtil().setWidth(375), height:
ScreenUtil().setHeight(200), color: Colors.red, child: Text(
' My width :${ScreenUtil().setWidth(375)}dp', style: TextStyle( color: Colors.white,
fontSize: ScreenUtil().setSp(12, false), ), ), ), Container( width:
ScreenUtil().setWidth(375), height: ScreenUtil().setHeight(200), color:
Colors.blue, child: Text(' My width :${ScreenUtil().setWidth(375)}dp', style:
TextStyle( color: Colors.white, fontSize: ScreenUtil().setSp(12, false), )), ),
], ), Text(' Equipment width :${ScreenUtil.screenWidth}px'),
Text(' Equipment height :${ScreenUtil.screenHeight}px'),
Text(' Pixel density of the device :${ScreenUtil.pixelRatio}'),
Text(' Bottom safety zone distance :${ScreenUtil.bottomBarHeight}px'),
Text(' Status bar height :${ScreenUtil.statusBarHeight}px'), Text(
' Actual height dp And design draft px The proportion of :${ScreenUtil().scaleHeight}', textAlign: TextAlign.center, ),
Text( ' Actual height dp And design draft px The proportion of :${ScreenUtil().scaleHeight}', textAlign:
TextAlign.center, ), Text( ' The ratio of the width and font size to the enlargement of the design draft :${ScreenUtil().scaleWidth *
ScreenUtil.pixelRatio}', textAlign: TextAlign.center, ), Text(
' The ratio of the height to the magnification of the design draft :${ScreenUtil().scaleHeight * ScreenUtil.pixelRatio}', textAlign:
TextAlign.center, ), SizedBox( height: ScreenUtil().setHeight(100), ),
Text(' Font scaling of the system :${ScreenUtil.textScaleFactory}'), Column( crossAxisAlignment:
CrossAxisAlignment.start, children: <Widget>[
Text(' My text size is on the design draft 14px, Does not change with the text scale of the system ', style: TextStyle( color: Colors.black,
fontSize: ScreenUtil().setSp(14, false))),
Text(' My text size is on the design draft 14px, Changes with the text scale of the system ', style: TextStyle( color: Colors.black,
fontSize: ScreenUtil().setSp(14))), ], ) ], ), ), ); }
<> Examples of use :

example demo
<https://github.com/OpenFlutter/flutter_ScreenUtil/blob/master/example/lib/main_zh.dart>

effect :


<> Adaptation principle

Let's talk about the adaptation scheme , Like our designers UI It's based on Iphone6 To do it , We know iPhone6 The resolution of 750*1334(px),
Or is it based on hdpi To design UI, We know hdpi Of Android The device is (240
dpi), The pixel density is 1.5, Namely hdpi The resolution width of the device is 320px, in short , No matter the unit of design draft is px, Or is it dp, We can all convert px.
So, if we base on px To fit ,ios and android It's all compatible .

hypothesis , Our design draft mobile phone is 10801920 px.
There is one in the design draft 540960 Components of , That is, the width and width are half of the mobile phone . If we write directly, the size of the component is defined like this , It may not be half as good on other sizes of equipment , Or more , Or less .
But we can look at it in proportion , That is, the width we want to achieve is half of the actual equipment .
So suppose the width of our device is deviceWidth and deviceHeight , The size of the component we want to write is :
wide :(540/1080)*deviceWidth, height : (960/1920)*deviceHeight.


Through this formula, we can find that , The width of the component we want to write is the size on the design draft width*(deviceWdith/ Prototype equipment width ). So every time we write ui When , How to design the size of the draft directly *(deviceWdith/ Equipment prototype ) Width is OK .

The principle is to get it first , Size ratio of actual equipment to prototype equipment .
first flutter The code to get the size of the device is :
The following data is my mobile phone data : import 'dart:ui'; // because window yes dart:ui Provided in , So we need to introduce this package .
window.physicalSize //Size(1080.0, 1794.0) Company px width =
window.physicalSize.width // width height = window.physicalSize.height // height
// With this method, there is no need to introduce a package MediaQuery.of(context).size //Size(411.4, 683.4) Company :dp widhtDp =
MediaQuery.of(context).size.width // width 411.4 heightDp =
MediaQuery.of(context).size.height // height 683.4
The design unit is px, And the size is 1080*1920 px Time :
scaleWidth = width / 1080; scaleHeight = height / 1920;
So we're going to write the size as 500100 The width of the control is 500scaleWidth .100*scaleHeigh
, Notice that the unit is px,flutter The default component size units are all dp, We have to do it px->dp Operation of . Divide it by pixel density .
flutter Method of getting pixel density :
MediaQuery.of(context).devicePixelRatio window.physicalSize
The two methods above give the same result , however window Object from dart:ui, So we introduced this package :

import ‘dart:ui’;

The design unit is dp, And the size is 360*640 dp Time :
scaleWidth = widhtDp / 360; scaleHeight = heightDp / 640;
So we're going to write the size as 500*100 The width of the control is 500*scaleWidth .100*scaleHeigh