无需外部包或框架计算，实现Flutter与Figma尺寸一致的方法

核心思路 #

Figma设计稿通常基于特定基准尺寸（如375pt的iPhone SE），Flutter需根据当前设备屏幕宽度计算缩放比例，将Figma中的固定尺寸转换为适配设备的动态尺寸，无需依赖第三方包。

具体实现步骤 #

• 定义基准缩放系数
  先确定你的Figma设计稿基准宽度（比如主流的375pt），通过设备屏幕宽度与基准宽度的比值生成全局缩放系数：

  double getScale(BuildContext context) {
    const designBaseWidth = 375.0; // 替换为你的Figma设计稿宽度
    return MediaQuery.of(context).size.width / designBaseWidth;
  }
  

• 尺寸适配（宽高、内边距、外边距）
  所有Figma中定义的固定像素值（宽、高、padding、margin等），都通过缩放系数转换：

  // Figma中16pt的padding，转换为适配值
  EdgeInsets.all(getScale(context) * 16)
  
  // Figma中200pt的容器宽度
  width: getScale(context) * 200
  

• 文字相关适配

  • 字体大小：缩放后建议添加上下限，避免小屏文字过小、大屏文字过大：

    double scaleFont(double figmaFontSize, BuildContext context) {
      final scaled = figmaFontSize * getScale(context);
      return scaled.clamp(12.0, 26.0); // 根据需求调整字号范围
    }
    

  • 行高：Figma中行高为绝对值（如16pt字体对应24pt行高），直接用缩放后的数值计算比值：

    TextStyle(
      fontSize: scaleFont(16, context),
      height: (getScale(context) * 24) / scaleFont(16, context),
    )
    

  • 字间距：Figma中的字间距（letterSpacing）单位为pt，直接缩放即可：

    TextStyle(
      letterSpacing: getScale(context) * 0.5 // Figma中0.5pt的字间距
    )
    

• 安全区域适配
  不要直接使用Figma中状态栏、底部导航栏的固定高度，改用Flutter的MediaQuery获取设备实际安全区域：

  final padding = MediaQuery.of(context).padding;
  // 顶部安全区域高度：padding.top
  // 底部安全区域高度：padding.bottom
  

注意事项 #

• 测试时覆盖不同尺寸设备（小屏手机、大屏手机、平板），验证适配效果
• 若设计稿有特殊大屏适配逻辑（如平板布局调整），可单独针对宽屏阈值做分支处理

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