background

Cliche: screen adaptation,UI cutout, visual restoration.

The solution

From Android, to Android

Android adaptation scheme is now relatively good headlines this

Toutiao screen adaptation scheme final version officially released!

SAO year your screen adaptation way should upgrade! – Toutiao adaptation scheme

I understand his principle is that by changing the system Settings, the DP value is converted into a unit of measurement based on width or height, i.e. the percentage of width or height, and RD can quickly convert the design into a UI view.

How do we transfer this solution to the Flutter

OK, now that we know how this works, how do we apply this scheme to a Flutter, that is, how do we modify the relative pixel units of a Flutter?

Modified as follows:

/ / the main function
voidmain() => InnerWidgetsFlutterBinding.ensureInitialized() .. attachRootWidget(newMyApp()) .. scheduleWarmUpFrame();// Implement it
const double SCREEN_WIDTH = 1242;

double getAdapterRatio() {
  return ui.window.physicalSize.width / SCREEN_WIDTH;
}

Size getScreenAdapterSize() {
  return Size(SCREEN_WIDTH, ui.window.physicalSize.height / getAdapterRatio());
}



class InnerWidgetsFlutterBinding extends WidgetsFlutterBinding {
  static WidgetsBinding ensureInitialized() {
    if (WidgetsBinding.instance == null) InnerWidgetsFlutterBinding();
    return WidgetsBinding.instance;
  }

  @override
  ViewConfiguration createViewConfiguration() {
    returnViewConfiguration( size: getScreenAdapterSize(), devicePixelRatio: getAdapterRatio(), ); }}Copy the code

The 1242 here is the standard size for communication with UE. The standard-size phone used is the iPhone 6Plus.

Extended method scheme

The problem with the above method is that the default relative pixel unit of the Flutter system has been modified. I have no problem using this method, but it will cause problems in the development of other RD in the project. My goal was simply to quickly draw pages with a low cost solution.

extension Adapt on Diagnosticable {
  static MediaQueryData mediaQuery = MediaQueryData.fromWindow(window);
  static double _width = mediaQuery.size.width;
  static var _ratio;

  init(int number) {
    int uiwidth = number is int ? number : 1242;
    _ratio = _width / uiwidth;
  }

  px(number) {
    if(! (_ratiois double || _ratio is int)) {
      init(1242);
    }
    returnnumber * _ratio; }}Copy the code

The extension function is used here, extended to Diagnosticable, since we haven’t found out how to write top-level functions in Dart yet.

  1. Why use extension functions

Like Kotlin, in order not to write utility classes

  1. Why expand toDiagnosticable

Because an instance of the layout class, which is a subclass of Diagnosticable, extends to it without relying on an external class instance.

Here’s an example of how this code works:

                  Positioned(
                    top: 0,
                    child: Image.asset(
                      'assets/images/bg/pay_head.png',
                      width: px(1037),
                    ),
                  ),
                  Positioned(
                    bottom: px(310),
                    child: Container(
                      height: px(796),
                      width: px(1072),
                      child: ...
                    ),
                  ),
Copy the code

If you use the extended notation, you can just pass in a px() function. The parameters in the function are taken directly from the UE cutting diagram, and the default units are not changed, nor are other RDS aware of it.

The specific effects are as follows:

This will be quick to write and fit.

The problem

The vision hasn’t been restored yet, so I’m going to evaluate the plan.

The third (iphone8) had some issues with the height Settings

Because the width is the base value used here, but some of the cut diagram parameters are the height of the annotation, in this case, it is either converted to the relative width value, or RD can estimate it by itself.

Character background rounded corners are problematic

The rounded corners here are cut from the picture, and there is a rounded corner drawn by myself outside. There must be something wrong with the different sources of the two rounded corners. Or let UE draw all of them directly, so that the development can be faster. Either LET RD draw all by himself,UE only gives the single figure.

Why did the second cell phone have a deletion

I wonder what’s wrong with Android phones. This Google Pixel3 is supposed to be good.

conclusion

Android is highly fragmented, so mature Android screen adaptation solutions have been released for a long time. In comparison, there is no big difference between the application scenarios of these two things. Then why are people upset about the Flutter adaptation?

Is the so-called easy to know and difficult to do, know that a knowledge point can only solve the problem at hand or more just act as some talking points, make good use of knowledge induction, internalization, application can really help yourself.