Flutter开发中如何根据不同手机屏幕尺寸调整Scaffold大小

以下是不需要复杂封装、可快速落地的实现方式：

• 优先使用Flutter原生相对布局能力，不要硬编码固定像素值。所有尺寸通过MediaQuery获取当前屏幕的逻辑宽高后按比例换算，比如设计稿基准宽度为375px，原固定宽度200px的控件可以写成MediaQuery.of(context).size.width * (200/375)，会自动按不同屏幕宽度等比缩放。
• Scaffold的body内部优先用Expanded、Flexible、Wrap、LayoutBuilder这类自适应布局组件，这类组件会自动根据父容器尺寸调整自身大小，不需要手动计算尺寸数值。
• 如果需要全局统一适配字体、内边距等属性，可以在MaterialApp的builder层统一处理，避免每页单独修改，示例代码如下：

MaterialApp(
  builder: (context, child) {
    final mediaQuery = MediaQuery.of(context);
    return MediaQuery(
      // 限制文本缩放比例区间，避免用户系统字体开太大把布局挤变形
      data: mediaQuery.copyWith(
        textScaleFactor: mediaQuery.textScaleFactor.clamp(0.8, 1.2)
      ),
      child: child!,
    );
  },
  home: const YourHomeScaffoldPage(),
);

• 如果你需要和UI设计稿1:1精准匹配，也可以用工业界通用的第三方适配库flutter_screenutil，初始化时传入设计稿的基准宽高，后续所有固定尺寸直接加.w、.h后缀即可自动适配，代码修改量最小。

注意不要直接调用window.physicalSize获取屏幕尺寸，该属性返回的是物理像素，和设备的逻辑像素存在倍率差，容易出现适配错乱，统一用MediaQuery封装后的尺寸即可。

内容的提问来源于stack exchange，提问作者flutteruser