如何在Flutter中全局统一textScaleFactor？解决路由弹窗失效问题

要实现所有场景下 textScaleFactor 一致，无需逐个 Widget 包裹 MediaQuery，以下是几个高效可行的方案：

方案一：利用 MaterialApp 的 builder 全局覆盖 #

这是最彻底的方案，能覆盖所有路由、弹窗（包括 showModalBottomSheet、showDialog）等场景。通过 builder 参数为整个应用的导航树注入统一的 MediaQuery 配置，所有新创建的上下文都会继承这个配置。

示例代码：

MaterialApp(
  builder: (context, child) {
    // 固定 textScaleFactor 为 1.0，可根据需求调整数值
    return MediaQuery(
      data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0),
      child: child!,
    );
  },
  home: const YourHomePage(),
  // 其他配置项
)

原理：builder 会包裹 MaterialApp 内部的 Navigator，所有通过 Navigator.push 打开的页面、各类弹窗都会使用这个 builder 提供的上下文，自然继承了自定义的 textScaleFactor。

方案二：通过 ThemeData 统一文本样式 #

如果只需要控制基于主题的文本组件，可以在 ThemeData 中为所有文本样式固定 textScaleFactor。这种方式适合对文本样式有统一管控需求的场景，但注意无法覆盖所有直接使用 Text 组件且未继承主题样式的情况。

示例代码：

MaterialApp(
  theme: ThemeData(
    textTheme: const TextTheme(
      displayLarge: TextStyle(textScaleFactor: 1.0),
      displayMedium: TextStyle(textScaleFactor: 1.0),
      displaySmall: TextStyle(textScaleFactor: 1.0),
      headlineLarge: TextStyle(textScaleFactor: 1.0),
      headlineMedium: TextStyle(textScaleFactor: 1.0),
      headlineSmall: TextStyle(textScaleFactor: 1.0),
      titleLarge: TextStyle(textScaleFactor: 1.0),
      titleMedium: TextStyle(textScaleFactor: 1.0),
      titleSmall: TextStyle(textScaleFactor: 1.0),
      bodyLarge: TextStyle(textScaleFactor: 1.0),
      bodyMedium: TextStyle(textScaleFactor: 1.0),
      bodySmall: TextStyle(textScaleFactor: 1.0),
      labelLarge: TextStyle(textScaleFactor: 1.0),
      labelMedium: TextStyle(textScaleFactor: 1.0),
      labelSmall: TextStyle(textScaleFactor: 1.0),
    ),
    // 若涉及输入框，需同步配置输入框相关文本样式
    inputDecorationTheme: const InputDecorationTheme(
      labelStyle: TextStyle(textScaleFactor: 1.0),
      hintStyle: TextStyle(textScaleFactor: 1.0),
    ),
  ),
  home: const YourHomePage(),
)

方案三：自定义全局 MediaQuery 组件 #

如果需要在多个项目中复用该配置，可以封装一个自定义组件，将整个应用包裹起来，效果和方案一类似，但更便于跨项目复用。

示例代码：

class GlobalMediaQuery extends StatelessWidget {
  final Widget child;
  final double textScaleFactor;

  const GlobalMediaQuery({
    super.key,
    required this.child,
    this.textScaleFactor = 1.0,
  });

  @override
  Widget build(BuildContext context) {
    return MediaQuery(
      data: MediaQuery.of(context).copyWith(textScaleFactor: textScaleFactor),
      child: child,
    );
  }
}

// 使用方式
void main() {
  runApp(
    const GlobalMediaQuery(
      textScaleFactor: 1.0,
      child: MaterialApp(
        home: YourHomePage(),
      ),
    ),
  );
}

为什么之前的方法失效？ #

直接在 MaterialApp 内部设置 MediaQuery 时，只有初始页面的上下文会继承该配置；而 Navigator.push、showModalBottomSheet 等操作会创建新的独立上下文，默认继承系统的 MediaQuery，因此无法生效。而通过 builder 或全局包裹的方式，能确保所有子上下文都继承自定义的配置。

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