screen_ratio_adapter😘 😘

Design draft is like clothes hanging on models, but forced to wear on different devices, it becomes a buyer’s show, or left and right asymmetry, or even broken.

It’s based on an idea

It’s a batch order, not a personal order.

Garment design draft — > processing factory mass production of different sizes — > customers choose — > the body;

The intermediate part is handled by this plug-in code

The principle of

Remember the Android native Toutiao adaptation? Is to modify the device screen density ratio constant obtained at run time. This plan has been proposed for a long time but it’s not spreading well.

The screen is a rectangle to the user (at least on mainstream devices right now); Mainstream mobile devices have cultivated the habit of swiping up and down for years;

Mainstream devices have become “narrow”;

Based on the above three points, screen width adaptation with high versatility, good implementation effect. As for the actual device height/width and design ratio difference handling, white or vertical change to scrollWidget

The practice report

\ equipment android Android iOS
Device resolution 1080×1794 720×2160 1242×2688
h/w 1.666 3.0 2.164
Screen density ratio ρ 2.625 1.2 3.0
UI draft 1 (300×510) H/W =1.7 Too long Too short Too short
Fit ratio ρ(300×510) 3.60 2.40 4.14
UI draft 1 (414×896) h/w =2.16 Too long Too short The same
Fit ratio ρ(414×896) 2.608 1.739 3.0

use

Like plus star gift
Everyone loves copy and paste
Keep a notebook if there are bugs
Come with your long sword
Copy the code

uploadedpub.dev️ ❤ ️ ❤ ️ thumb up 😘 😘

Github ️❤️❤️ add star 😘 ❤️)

## Copy and paste
dependencies:
  screen_ratio_adapter: ^ hundreds
Copy the code
import 'package:screen_ratio_adapter/screen_ratio_adapter.dart';
/// The size of the design draft should be pt or DP
Size uiSize = Size(414.896);
//void main() => runApp(MyApp());
void main() => runFxApp(MyApp(), uiSize: uiSize);

Copy the code

References and acknowledgements

A rough and fast full screen adaptation for Android

Flutter screen adaptation

Flutter screen adaptation, a global adaptation method for once and for all