如何为Flutter Web和移动端搭建同设计响应式页面 解决sizer包网页尺寸过大问题

你遇到的Web端尺寸偏大问题，核心是sizer默认直接将当前窗口的全宽/全高作为尺寸换算基准，桌面端浏览器窗口宽度远大于移动端，按比例换算出的实际尺寸自然会远超移动端的显示效果。以下是可直接落地的解决方案：

• 方案1：自定义适配基准限制
  你可以封装全局的适配工具方法，给Web端的换算基准设置上限，假设你的UI设计稿基准宽度为375px、基准高度为812px，工具类代码示例如下：

import 'package:flutter/foundation.dart';
import 'package:sizer/sizer.dart';

// 自适应宽度换算单位，1adw等价于限制基准后的1.w
double get adw {
  if (kIsWeb && 100.w > 375) {
    return 375 / 100;
  }
  return 1.w;
}

// 自适应高度换算单位，1adh等价于限制基准后的1.h
double get adh {
  if (kIsWeb && 100.h > 812) {
    return 812 / 100;
  }
  return 1.h;
}

// 自适应字体单位
double get adsp {
  if (kIsWeb && 100.w > 375) {
    return 375 / 100 / 3; // 系数可根据你的设计稿调整
  }
  return 1.sp;
}

后续把项目中所有用到的1.w、1.h、1.sp分别替换为1 * adw、1 * adh、1 * adsp即可，无需改动原有布局逻辑即可实现两端尺寸对齐。

• 方案2：Web端固定内容容器最大宽度
  如果你的需求是Web端和移动端的布局完全一致，不需要做桌面端的宽屏适配，可以在页面最外层套一层约束容器，限制内容区域的最大宽度，超出窗口宽度的部分用背景填充，代码示例：

@override
Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: Colors.white, // 侧边填充区域的背景色可自定义
    body: kIsWeb
        ? Center(
            child: ConstrainedBox(
              constraints: const BoxConstraints(maxWidth: 375),
              child: const YourPageWidget(),
            ),
          )
        : const YourPageWidget(),
  );
}

该方案可以完全还原移动端的布局效果，适合不需要桌面端宽屏适配的业务场景。

• 方案3：断点适配（适用于需要宽屏响应的场景）
  如果你需要同时支持Web端宽屏布局和移动端布局统一，可以设置窗口宽度断点，当宽度小于768px时沿用移动端的sizer换算逻辑，宽度大于等于768px时单独适配桌面端的布局规则，无需强行和移动端尺寸保持一致。

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