Flutter移动端/平板/桌面端响应式字体适配求助

问题根源 #

你遇到的核心问题是screen_util的.sp单位基于设计尺寸等比缩放，在平板、桌面这类大屏设备上会同步放大字体，导致显示过大。另外代码中设置TextScaler.linear(1.0)禁用了系统原生的文本缩放适配，进一步放大了大屏字体的违和感。

解决方案 #

以下几种方案可以针对性解决这个问题，按需选择：

1. 基于设备类型直接设置字体比例

通过判断屏幕宽度区分设备类型，为不同终端设置不同的字体缩放比例：

首先定义设备判断工具函数：

bool isMobile(BuildContext context) => MediaQuery.sizeOf(context).width < 600;
bool isTablet(BuildContext context) => MediaQuery.sizeOf(context).width >= 600 && MediaQuery.sizeOf(context).width < 1200;
bool isDesktop(BuildContext context) => MediaQuery.sizeOf(context).width >= 1200;

然后在文本中使用：

Text(
  "测试文本",
  style: TextStyle(
    fontSize: isMobile(context) ? 17.sp : isTablet(context) ? 16.sp : 15.sp,
  ),
)

2. 封装响应式字体扩展函数

为num类型扩展一个响应式字体方法，自动适配不同屏幕：

extension ResponsiveFontSize on num {
  double spResponsive(BuildContext context) {
    final screenWidth = MediaQuery.sizeOf(context).width;
    if (screenWidth >= 1200) {
      // 桌面端字体缩小20%
      return (this * 0.8).sp;
    } else if (screenWidth >= 600) {
      // 平板端字体缩小10%
      return (this * 0.9).sp;
    }
    // 移动端保持原尺寸
    return this.sp;
  }
}

使用时直接调用：

Text(
  "测试文本",
  style: TextStyle(fontSize: 17.spResponsive(context)),
)

3. 自定义screen_util的字体缩放逻辑

通过fontSizeResolver参数全局配置字体缩放规则，无需在每个文本处单独设置：

ScreenUtilInit(
  designSize: const Size(360, 690),
  minTextAdapt: true,
  splitScreenMode: true,
  // 自定义字体缩放逻辑
  fontSizeResolver: (fontSize, screenWidth, screenHeight) {
    if (screenWidth >= 1200) {
      return fontSize * 0.8;
    } else if (screenWidth >= 600) {
      return fontSize * 0.9;
    }
    return fontSize;
  },
  builder: (context, child) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  },
);

额外优化建议 #

• 移除MediaQuery.of(context).copyWith(textScaler: TextScaler.linear(1.0))，保留系统原生的文本缩放功能，提升无障碍体验。
• 可以根据实际产品设计规范调整缩放比例，比如桌面端的最小字体不要低于12.sp，保证可读性。

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