Flutter中不依赖第三方包，如何根据设备尺寸动态设置字体大小？

直接给几个实用的落地方法，解决固定字号在不同设备上显示失衡的问题：

1. 基于屏幕宽度的比例适配 #

Figma设计稿通常有一个基准宽度（比如375px的iPhone SE尺寸），用当前设备屏幕宽度和设计稿宽度的比例，缩放Figma里的字号：

Text(
  'Find your\nGadget',
  style: TextStyle(
    // 375是你的Figma设计稿基准宽度，根据实际情况修改
    fontSize: (MediaQuery.of(context).size.width / 375) * 65,
    color: AppColors.splashTextColor,
    fontFamily: AppFonts.raleWayExtraBold,
  ),
)

2. 基于父容器尺寸适配 #

如果文本所在的容器不是全屏，用LayoutBuilder获取父容器的最大宽度来计算字号，适配更精准：

LayoutBuilder(
  builder: (context, constraints) {
    const double figmaBaseWidth = 375;
    final double fontSize = (constraints.maxWidth / figmaBaseWidth) * 65;
    return Text(
      'Find your\nGadget',
      style: TextStyle(
        fontSize: fontSize,
        color: AppColors.splashTextColor,
        fontFamily: AppFonts.raleWayExtraBold,
      ),
    );
  },
)

3. 封装工具类复用 #

避免重复写计算逻辑，封装一个工具类，项目里所有地方直接调用：

// 工具类
import 'dart:math';
import 'package:flutter/widgets.dart';

class ResponsiveFont {
  static double calculate(BuildContext context, double figmaFontSize) {
    const double baseWidth = 375;
    // 可选：给字号加范围限制，防止极端屏幕下字号过大/过小
    return clamp(
      (MediaQuery.of(context).size.width / baseWidth) * figmaFontSize,
      40, // 最小字号
      80, // 最大字号
    );
  }
}

// 使用示例
Text(
  'Find your\nGadget',
  style: TextStyle(
    fontSize: ResponsiveFont.calculate(context, 65),
    color: AppColors.splashTextColor,
    fontFamily: AppFonts.raleWayExtraBold,
  ),
)

注意：如果你的设计稿是基于高度做的，把代码里的size.width换成size.height即可，不过宽度适配在大部分场景下更符合用户视觉体验。

内容的提问来源于stack exchange，提问作者Ahmed Iqbal teli