如何实现Flutter响应式字体大小？MediaQuery方案失效求助

当前方案的问题 #

1. 变量名错误：你定义了mediaQueryData但后续用的是_mediaQueryData，导致可能使用旧的缓存数据，无法获取当前屏幕的实时尺寸。
2. 缩放逻辑仅基于固定基准屏比例，未关联文本容器的可用宽度，不同宽高比的屏幕下，文本容器宽度变化后，字体大小未同步适配，导致换行不一致。

解决方案 #

方案1：用FittedBox快速适配（最简） #

直接用FittedBox包裹文本，让Flutter自动根据容器宽度缩放字体，保证文本排版一致：

Container(
  width: safeWidth, // 你的可用安全宽度
  child: FittedBox(
    fit: BoxFit.scaleDown, // 仅缩小不放大，避免字体过大
    alignment: Alignment.centerLeft, // 对齐方式按需调整
    child: Text("需要适配的文本内容"),
  ),
)

方案2：动态计算字体大小（精细控制） #

基于可用宽度和基准尺寸计算字体大小，确保文本在不同屏幕下排版一致：

// 定义基准参数（和你的设计稿一致）
const baseFontSize = 16.0;
const baseSafeWidth = 392.0;

// 计算适配后的字体大小，添加上下限避免极端情况
double adaptiveFontSize = (safeWidth / baseSafeWidth) * baseFontSize;
adaptiveFontSize = adaptiveFontSize.clamp(12.0, 20.0);

// 使用适配后的字体
Text(
  "需要适配的文本内容",
  style: TextStyle(fontSize: adaptiveFontSize),
  overflow: TextOverflow.ellipsis, // 可选：超出显示省略号
)

方案3：使用第三方响应式包（成熟方案） #

推荐用flutter_screenutil，无需自己编写缩放逻辑，直接支持响应式字体和布局：

// 初始化（在MaterialApp的首页或入口处）
ScreenUtil.init(
  context,
  designSize: Size(392, 820), // 你的设计稿基准尺寸
  minTextAdapt: true,
);

// 使用响应式字体
Text(
  "需要适配的文本内容",
  style: TextStyle(fontSize: 16.sp), // sp为响应式字体单位
)

补充注意点 #

• 修复变量名错误：将代码中所有_mediaQueryData替换为mediaQueryData，确保获取实时屏幕数据。
• 如果需要严格控制行数，可结合TextPainter预计算文本宽度，动态调整字体大小，确保文本刚好适配指定行数。

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