Shulou(Shulou.com)06/03 Report--

Flutter screen size adaptation and font size adaptation how to achieve, I believe that many inexperienced people do not know what to do, so this paper summarizes the causes of the problem and solutions, through this article I hope you can solve this problem.

Foreword:

Nowadays, there are more and more mobile phone brands and models, so that when we write the layout, we will display different effects on different mobile devices.

For example, the size of a View in our design draft is 300px. If we write 300px directly, it may display normally on the current device, but it may be too small or too large for other devices, which requires us to adapt to the screen.

Android native words have their own adaptation rules, you can build different folders according to different sizes, and the system will take the corresponding size layout according to the current device size. The flutter itself does not have adaptation rules, and the original one is more cumbersome, which requires us to adapt to the screen ourselves.

How to use it:

Installation dependencies:

Please check the latest version before installation

Dependencies: flutter: sdk: flutter # add dependency flutter_screenutil: ^ 0.4.2

Import the package at each use:

Import 'package:flutter_screenutil/flutter_screenutil.dart'

Initialize setting size

Please set the width and height of the design draft before use, and pass in the width and height of the design draft (in px)

Be sure to set up the page in the home of MaterialApp (that is, the entry file, which only needs to be set once) to ensure that the appropriate size is set before each use:

/ / set the fit size (fill in the screen size of the device in the design draft) if the design draft is designed according to the size of iPhone6 (iPhone6 750 / 1334) ScreenUtil.instance = ScreenUtil (width: 750, height: 1334).. init (context)

Use:

Fit size:

The px size of the incoming design draft:

Adapt width: ScreenUtil (). SetWidth according to screen width

Adapt height: ScreenUtil (). SetHeight (200) according to screen height

Be careful

The height is also adapted according to setWidth to ensure that it will not deform (when you want a square)

The setHeight method is mainly adapted in height, and is used when you want to control the height of the screen on the UI as shown in the actual display.

For example:

/ / rectangle: Container (width: ScreenUtil (). SetWidth, height: ScreenUtil (). SetHeight, / / if you want to display a square: Container (width: ScreenUtil (). SetWidth (300), height: ScreenUtil (). SetWidth (300),)

Appropriate fonts:

ScreenUtil (). SetSp (28) / / incoming font size, which is scaled according to the system's "font size" auxiliary option ScreenUtil (). SetSp (28) / / the font size is not scaled according to the system's "font size" auxiliary option, for example: Text ('My font size is 28px and will not change with the system.', style: TextStyle (color: Colors.black, fontSize: ScreenUtil (). SetSp (28)))

Other related api:

ScreenUtil.pixelRatio / / Pixel density of the device ScreenUtil.screenWidth / / device width ScreenUtil.screenHeight / / device height ScreenUtil.bottomBarHeight / / bottom safe zone distance Suitable for ScreenUtil.statusBarHeight / / status bar height bangs with buttons under the full screen will be higher px ScreenUtil.textScaleFactory / / system font zoom ratio ScreenUtil (). ScaleWidth / / the ratio of the dp of the actual width to the design px ScreenUtil (). ScaleHeight / / the ratio of the actual height dp to the design px

/ / Import import 'package:flutter_screenutil/flutter_screenutil.dart';... @ override Widget build (BuildContext context) {/ / set the fit size (enter the screen size of the device in the design draft) if the design draft is designed according to the size of iPhone6 (iPhone6 750 / 1334) ScreenUtil.instance = ScreenUtil (width: 750, height: 1334).. init (context); print (' device width: ${ScreenUtil.screenWidth}') / / Device width print ('device height: ${ScreenUtil.screenHeight}'); / / Device height print ('device pixel density: ${ScreenUtil.pixelRatio}'); / / Device pixel density print ('bottom safe 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 ('ratio of actual width dp to design px: ${ScreenUtil (). ScaleWidth}'); print ('ratio of actual height dp to design px: ${ScreenUtil (). ScaleHeight}'); print ('ratio of width and font to design magnification: ${ScreenUtil (). ScaleWidth * ScreenUtil.pixelRatio}') Print ('ratio of height to magnification of the design: ${ScreenUtil (). ScaleHeight * ScreenUtil.pixelRatio}'); print ('system font zoom ratio: ${ScreenUtil.textScaleFactory}') Return new Scaffold (appBar: new AppBar (title: new Text (widget.title),), body: new Center (child: Column (crossAxisAlignment: CrossAxisAlignment.center, children: [Row (children: [Container (width: ScreenUtil (). SetWidth (), 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 (), height: ScreenUtil (). SetHeight, color: Colors.blue, child: Text ('my width: ${ScreenUtil (). SetWidth (375)} dp', style: TextStyle (color: Colors.white, fontSize: ScreenUtil (). SetSp (12, false),),], Text ('device width: ${ScreenUtil.screenWidth} px'), Text (' device height: ${ScreenUtil.screenHeight} px') Text ('device pixel density: ${ScreenUtil.pixelRatio}'), Text ('bottom safe zone distance: ${ScreenUtil.bottomBarHeight} px'), Text (' status bar height: ${ScreenUtil.statusBarHeight} px'), Text ('ratio of actual height dp to design draft px: ${ScreenUtil (). ScaleHeight}', textAlign: TextAlign.center,), Text ('ratio of actual height dp to design draft px: ${ScreenUtil (). ScaleHeight}' TextAlign: TextAlign.center,), Text ('ScreenUtil (). ScaleWidth * ScreenUtil.pixelRatio}', textAlign: TextAlign.center,), Text ('height relative to design magnification: ${ScreenUtil (). ScaleHeight * ScreenUtil.pixelRatio}', textAlign: TextAlign.center,), SizedBox (height: ScreenUtil (). SetHeight (100), Text ('system font zoom ratio: ${ScreenUtil.textScaleFactory}') Column (crossAxisAlignment: CrossAxisAlignment.start, children:] Text ('my text size is 14px on the design draft It will not change with the text zoom ratio of the system', style: TextStyle (color: Colors.black, fontSize: ScreenUtil (). SetSp (14, false)), Text ('my text size is 14px on the design draft, it will change with the text scale of the system', style: TextStyle (color: Colors.black, fontSize: ScreenUtil (). SetSp (14)),],],),) }

Examples of use:

Example demo

Adaptation principle

Let's talk about the adaptation scheme. For example, the UI designed by our designer is based on Iphone6. We know that the resolution of iPhone6 is 750mm 1334 (px).

Or the UI is designed according to the device of hdpi. We know that the Android device of hdpi is (240dpi), and the pixel density is 1.5, that is, the resolution width of hdpi device is 320px. In short, no matter the unit of the design is px or dp, we can convert it into px.

Then if we adapt according to px, ios and android will be compatible.

Suppose that our mobile phone is 10801920 px.

The design draft has a 540960 component, that is, the width and width are half the width of the phone. If we define the size of the component directly, it may not be half, more or less on devices of other sizes. But we can look at it proportionally, that is, the width we want to achieve is half that of the actual equipment.

So suppose the width of our device is deviceWidth and deviceHeight, and the size of the component we want to write is: width: (540Uniq1080) * deviceWidth, height: (960Uniq1920) * deviceHeight.

Through this formula, we can find that the component width we want to write is the size width* (deviceWdith/ prototype device width) on the design draft. Then every time we write ui, as long as directly where to design the size of the draft * (deviceWdith/ device prototype) width.

The principle is to first obtain the size ratio of the actual equipment to the prototype equipment.

First of all, the code for flutter to get the size of the device is:

The following data are my mobile phone data:

Import 'dart:ui' / / because window is provided in dart:ui, you need to introduce this package .window.crystalSize / / Size (1080.0, 1794.0) unit pxwidth = window.physicalSize.width / / width height = window.physicalSize.height / / height / / using this method, there is no need to introduce the package MediaQuery.of (context). Size / / Size (411.4) 683.4) Unit: dpwidhtDp = MediaQuery.of (context). Size.width / / width 411.4heightDp = MediaQuery.of (context). Size.height / / height 683.4

When the design unit is px and the size is 1080 to 1920 px:

ScaleWidth = width / 1080 * scaleHeight = height / 1920

Then we need to write that the width of the 500100 control is 500scaleWidth .100 * scaleHeigh. Note that the default component size unit in px,flutter is dp, and we also need to operate px- > dp. Divide by pixel density. Flutter's way to get pixel density:

MediaQuery.of (context). DevicePixelRatiowindow.physicalSize

The above two methods get the same result, but the window object comes from dart:ui, so we introduce this package:

Import 'dart:ui'

When the design unit is dp and the size is 360,640 dp:

ScaleWidth = widhtDp / 360 / scaleHeight = heightDp / 640

So we have to write that the width of the 500 '100 control is 500*scaleWidth .100 * scaleHeigh.

After reading the above, have you mastered the methods of flutter screen size adaptation and font size adaptation? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.