本文是根据 Daniele Cambi 的文章 Flutter — Effectively scale UI according to different screen sizes 总结而来 ：
文章地址 ：https://medium.com/flutter-community/flutter-effectively-scale-ui-according-to-different-screen-sizes-2cb7c115ea0a（自备扶梯）
本文核心思想 ：
作者创建一个矩形 ：
Container(
height: 40,
width: 60,
)
在iPhone 5s (4" Display) and on an iPhone XS Max (6,46" Display)，
显示效果的差异 ！！！ 如何解决这个问题呢 ？
注： Flutter 使用的 逻辑像素 logical pixels 为单位 ，和 Android的 dp还是不一样
具体 lp 有什么效果，网上也没查到具体资料
如何解决这个问题呢 ？
作者认为可以把屏幕认为是一个 ， 100 * 100 的格子（或者认为水平方向和竖直方向，平均分成100个单位 ，恩 ，是不是就是Android中的百分比布局了）
作者新建一个帮助类 ：
import ‘package:flutter/widgets.dart’;
class SizeConfig {
static MediaQueryData _mediaQueryData;
static double screenWidth;
static double screenHeight;
static double blockSizeHorizontal;
static double blockSizeVertical;
// 初始化方法
void init(BuildContext context) {
_mediaQueryData = MediaQuery.of(context);
// flutter系统提供的类，可以查询屏幕方向，屏幕宽、高
// 返回的宽、高，单位： dp, 宽高返回的单位是 dp 哦！！！
// 返回屏幕宽高，是随着屏幕旋转，返回值是不一样的 ！！！
screenWidth = _mediaQueryData.size.width;
screenHeight = _mediaQueryData.size.height;
// 屏幕宽高 ，均分 100 份
blockSizeHorizontal = screenWidth / 100;
blockSizeVertical = screenHeight / 100;
}
}
初始化方法 ：
class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
SizeConfig().init(context);
}
}
使用帮助类来设置widget大小 ：
@override
Widget build(BuildContext context) {
return Center(
child: Container(
height: SizeConfig.blockSizeVertical * 20,
width: SizeConfig.blockSizeHorizontal * 50,
color: Colors.orange,
),
);
}
效果图 ：
对异形屏 ，刘海屏，水滴屏等异形屏幕(notches)和状态栏（status bars）、导航栏(navigation bars)的处理
在Flutter中有一个非常方便的小部件，可以有效地处理这些问题，它被称为“安全区域”( SafeArea)。
个人理解，flutter , 把 异形屏 ，导航栏相关区域称为 安全区域 。
作者的思想 ：屏幕的长宽去掉安全区域的大小，然后分成 100份 ，算出每一块的单位长度 。
class SizeConfig {
static MediaQueryData _mediaQueryData;
static double screenWidth;
static double screenHeight;
static double blockSizeHorizontal;
static double blockSizeVertical;
static double _safeAreaHorizontal;
static double _safeAreaVertical;
static double safeBlockHorizontal;
static double safeBlockVertical;
void init(BuildContext context) {
_mediaQueryData = MediaQuery.of(context);
screenWidth = _mediaQueryData.size.width;
screenHeight = _mediaQueryData.size.height;
blockSizeHorizontal = screenWidth / 100;
blockSizeVertical = screenHeight / 100;
_safeAreaHorizontal = _mediaQueryData.padding.left +
_mediaQueryData.padding.right;
_safeAreaVertical = _mediaQueryData.padding.top +
_mediaQueryData.padding.bottom;
safeBlockHorizontal = (screenWidth -
_safeAreaHorizontal) / 100;
safeBlockVertical = (screenHeight -
_safeAreaVertical) / 100;
}
}
文字的缩放 ：
我们可以使用 SizeConfig.safeBlockHorizontal or SizeConfig.safeBlockVertical为单位 ，对文字进行缩放 。
如果您已经看到这里，不妨我们深度思考一下 ：
真实的软件开发过程，一般是设计人员先设计好设计图 or 设计稿（一般是1080px * 1920px为基准），然后研发人员进行开发
那我们就把屏幕宽和长 ，分成 1080 和 1920 个单位 ，然后按设计图上的标注去填写相应widgets的大小
所以我认为 flutter 非常适合百分比布局（天生适合按比例布局）
而Android 百分比布局，适配工作量非常大，兼容性差
在网上发现了一个开源库 ，原理我觉得差不多，大家可以学习一下
flutter_screenutil
https://github.com/OpenFlutter/flutter_screenutil/
如果觉得文章有用，帮忙点个喜欢❤️ ，