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

This article mainly explains "the method of building screen adaptation in Flutter application framework". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Next let the editor to take you to learn "Flutter application framework to build screen adaptation method" it!

Due to the diversity of mobile devices, especially the serious fragmentation of Android, there are a variety of resolutions, and Flutter cross-platform development needs to support both Android and iOS. In order to restore the design effect as much as possible to enhance the user experience, screen adaptation is imperative.

At present, there is no official screen adaptation scheme for Flutter. In the development of Flutter project, most of the adaptation programs are adapted through proportion, which is a general adaptation method. This adaptation method is also widely used in front-end, Android, iOS, Mini Program and other development.

Principle

UI is usually designed according to a fixed size, such as 360x690. the actual device resolution may be Google Pixel: 1080 x 1920, Google Pixel XL: 1440 x 2560, iPhone 12 Pro Max: 1284 x 2778, and so on. When developing, if you write the dead value directly according to the design drawing, the final effect will be inconsistent with the design effect. At this time, it can be adapted in a proportional way.

Divide the design drawing into fixed units and define an identity for this unit, such as w, and then get the true width represented by 1w by obtaining the device resolution and dividing the true width of the device by the width of the design drawing:

1W = true width of the device / width of the design drawing

If the size of the design drawing is 360 x 690, the width is 360w, and the real equipment width is 1080, then 1w = 1080 / 360 = 3.

According to the above algorithm, the true width of 1w of the corresponding device is obtained:

Google Pixel: 1w = 1080 / 3603

Google Pixel XL: 1w = 1440 / 360 = 4

IPhone 12 Pro Max: 1w = 1284 / 3603.57

According to the same algorithm, the height can be defined as h, and the true value of the height unit of the corresponding equipment can be obtained as follows:

Google Pixel: 1h = 1920 / 6902.78

Google Pixel XL: 1h = 2560 / 6903.71

IPhone 12 Pro Max: 1h = 2778 / 690 = 4.03

After getting the true value of w and h after conversion, we can use it to set the height, width and spacing of the UI control in the development process, so that the final effect is infinitely close to that of the design drawing.

In the process of development, width is generally used to adapt, the height of the control is either adaptive, or the unit of width is also set, and then the overall height adapts according to the content. However, if there is a special need, you can also use height to adapt, for example, the requirement is that banner accounts for 1x4 of the screen, or the content is exactly displayed on one screen. At this time, you can use height units to adapt when setting the height of the control.

Based on the above algorithm, the corresponding adaptation scheme can be realized in the project, but in line with the idea of not repeating the wheel, the adaptation library flutter_screenutil can be used directly in the project development.

Flutter_screenutil

Flutter_screenutil is a screen adaptation library based on the above proportional adaptation principle. The latest version is 5.0.1 and has 2.8k star on GitHub. There are 1536 like, 130 pub index and 99% popularity on pub.dev, which shows that this is a reliable wheel.

Flutter_screenutil: let your UI display reasonable layout on different sizes of screen!

Add dependency

Add the dependency of flutter_screenutil to the pubspec.yaml of the project root:

Dependencies: flutter: sdk: flutter # add dependency flutter_screenutil: ^ 5.0.1 initialization

Flutter_screenutil provides two ways to initialize: ScreenUtilInit and ScreenUtil.init. First import the package where it is used:

Import 'package:flutter_screenutil/flutter_screenutil.dart'

ScreenUtilInit

To initialize using ScreenUtilInit, you need to wrap the MaterialApp of the project in a layer, then return the MaterialApp of the project in builder, and pass the size of the design drawing in the designSize parameter of ScreenUtilInit. The implementation is as follows:

Class MyApp extends StatelessWidget {@ override Widget build (BuildContext context) {return ScreenUtilInit (designSize: Size (360,690), / / incoming design dimensions builder: () = > MaterialApp (...),);}}

ScreenUtil.init

You can initialize flutter_screenutil by directly using the ScreenUtil.init method and passing the screen size, design drawing size and screen orientation. The code is as follows:

ScreenUtil.init (BoxConstraints (maxWidth: MediaQuery.of (context). Size.width, / / screen width maxHeight: MediaQuery.of (context). Size.height, / / screen height), designSize: const Size (360,690), / / Design size orientation: Orientation.portrait); / / screen orientation

To use this approach, you only need to initialize it before using flutter_screenutil, which is usually initialized when the root route is the first page to load.

Note: ScreenUtil.init cannot be initialized in MyApp and will report the following error No MediaQuery ancestor could be found starting from the context that was passed to MediaQuery.of (). This can happen because you have not added a WidgetsApp, CupertinoApp, or MaterialApp widget (those widgets introduce a MediaQuery), or it can happen if the context you use comes from a widget above those widgets. Because the MaterialApp has not been loaded at this time, you cannot use MediaQuery.of (context) to get the screen width and height.

For the above two initialization methods, the flutter_screenutil authors recommend the second method.

Use

After initialization, you can use the method provided by flutter_screenutil to obtain the adapted value for use.

You can obtain the width, height and font adaptation values by using the following api:

ScreenUtil (). SetWidth / / fit size according to screen width ScreenUtil (). SetHeight (200) / / fit size according to screen height (generally fit according to width) ScreenUtil (). Radius (200) / adjust ScreenUtil () .setSp (24) / / font size according to the smaller of the width or height

The parameter passed in is the size on the design drawing. Examples in practical use are as follows:

Container (width: ScreenUtil (). SetWidth, height: ScreenUtil (). SetHeight, child: Text ("Hello", style: TextStyle (fontSize: ScreenUtil (). SetSp (24)),)

In this way, you can use the appropriate values for development.

But I find it too troublesome to write like this, and in order to get an appropriate value, I have to write a long string of code. Flutter_screenutil provides a more concise calling method. Using the Dart extension to extend a series of attributes for the num type can be easily called by developers. The above api can be converted by extending the attributes as follows:

ScreenUtil (). SetWidth (540) = > 540.hScreenUtil (). SetHeight () = > 200.wScreenUtil (). Radius (200) = > 200.rScreenUtil (). SetSp (24) = > 24.sp

Examples of modified usage are as follows:

Container (width: 200.w, height: 540.h, child: Text ("Hello", style: TextStyle (fontSize: 24.sp),)

That makes it much simpler.

Note: according to the adaptation principle explained above, generally 1.w! = 1.h, unless the screen resolution ratio is exactly the same as the design drawing scale, so if you want to set a square, remember to use the same unit, such as all set the same w or h, otherwise it may be displayed as a rectangle.

In addition to the above four extended properties, sm, sw and sh are also provided.

Sm: take the minimum value between the value itself and the value of sp. For example, 12.sm takes 12 to compare with the value of 12.sp to take the lowest value.

Sw: the abbreviation for screen width, the screen width, returns the value in proportion to the screen width. For example, 0.2.sw returns 20% of the screen width. SW is the entire screen width.

Sh: an acronym for screen height and screen height, which acts like sw and returns the screen height value of the specified ratio. For example, 1.sh is the entire screen height.

Use sp as the font unit, the default is to change with the system font zoom, if you do not want the font to change with the system zoom, you can set textScaleFactor to 1.0 to achieve. You can set MaterialApp globally or individually for Text in the project:

Global settings:

MaterialApp (debugShowCheckedModeBanner: false, title: 'Flutter_ScreenUtil', theme: ThemeData (primarySwatch: Colors.blue,), builder: (context, widget) {return MediaQuery (/ sets the text size does not change with system settings data: MediaQuery.of (context) .copyWith (textScaleFactor: 1. 0), child: widget ) }, home: HomePage (title: 'FlutterScreenUtil Demo'),)

Text is set separately:

Text ("text", textScaleFactor: 1.0) effect

Attach the official effect picture:

Other Api

In addition to adapting api, flutter_screenutil also provides a number of practical api, as follows:

ScreenUtil () .pixelRatio: the pixel density of the device

ScreenUtil () .screenWidth: screen width, equivalent to 1.sw

ScreenUtil () .screenHeight: screen height, equivalent to 1.sh

ScreenUtil (). BottomBarHeight: bottom navigation height, such as the height of the button at the bottom of the full screen

ScreenUtil () .statusBarHeight: status bar height

ScreenUtil (). TextScaleFactor: system font scaling

ScreenUtil (). ScaleWidth: the ratio of the actual width to the width of the design drawing

ScreenUtil (). ScaleHeight: the ratio of the actual height to the height of the design drawing

ScreenUtil () .orientation: screen orientation

At this point, I believe you have a deeper understanding of "the method of building screen adaptation in Flutter application framework". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.