Flutter中保持应用字体大小不受系统字体缩放影响的问题

问题背景 #

我需要让Flutter应用的字体大小不受系统字体缩放设置影响，于是在main.dart中通过根MediaQuery将textScaler设为TextScaler.linear(1)，但这导致TextFormField在键盘弹出时出现布局重叠的异常；如果不设置该拦截，布局交互正常，但字体大小会随系统设置变化。

问题复现代码 #

初始拦截文本缩放的main.dart代码 #

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(
    MediaQuery(
      data: MediaQueryData.fromView(
              WidgetsBinding.instance.platformDispatcher.views.single)
          .copyWith(
              textScaler: const TextScaler.linear(
                  1)), // 尝试拦截系统字体大小变化
      child: const TestFontScale(),
    ),
  );
}

TestFontScale组件代码 #

class TestFontScale extends StatefulWidget {
  const TestFontScale({super.key});

  @override
  State<TestFontScale> createState() => _TestFontScaleState();
}

class _TestFontScaleState extends State<TestFontScale> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            const Text(
              "Hello World",
              textDirection: TextDirection.ltr,
            ),
            Container(
              padding: const EdgeInsets.only(top: 8.0),
              child: TextFormField(
                decoration: const InputDecoration(
                  border: OutlineInputBorder(),
                  hintText: 'Put some text',
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

问题原因 #

之前的代码直接使用了应用初始化时的MediaQueryData（此时键盘未弹出，viewInsets等布局参数为初始状态），并固定了该数据。当键盘弹出时，系统会更新MediaQueryData的viewInsets参数来通知布局调整，但根MediaQuery未同步这些更新，导致组件无法正确响应键盘高度变化，最终出现布局重叠。

解决方案 #

方法1：动态继承父级MediaQuery并替换textScaler #

通过自定义Widget获取实时的系统MediaQueryData，仅替换textScaler部分，保留其他所有布局相关参数：

class FixedTextScaleMediaQuery extends StatelessWidget {
  const FixedTextScaleMediaQuery({super.key, required this.child});

  final Widget child;

  @override
  Widget build(BuildContext context) {
    // 获取当前最新的系统MediaQueryData
    final mediaQuery = MediaQuery.of(context);
    // 仅固定文本缩放比例，保留其他所有参数
    return MediaQuery(
      data: mediaQuery.copyWith(textScaler: const TextScaler.linear(1)),
      child: child,
    );
  }
}

// 使用方式
void main() {
  runApp(const MaterialApp(
    home: FixedTextScaleMediaQuery(child: TestFontScale()),
  ));
}

这种方式会自动响应系统MediaQueryData的所有更新（包括键盘弹出/收起、屏幕旋转等），仅固定文本缩放比例，完全不影响其他组件的正常交互。

方法2：通过Theme全局设置文本缩放 #

如果应用依赖Theme管理样式，可以在ThemeData中为所有文本样式设置fontSizeFactor: 1，强制文本不跟随系统缩放：

void main() {
  runApp(MaterialApp(
    theme: ThemeData(
      textTheme: const TextTheme(
        bodyLarge: TextStyle(fontSizeFactor: 1),
        bodyMedium: TextStyle(fontSizeFactor: 1),
        bodySmall: TextStyle(fontSizeFactor: 1),
        titleLarge: TextStyle(fontSizeFactor: 1),
        // 根据应用使用的文本样式逐一设置
      ),
      inputDecorationTheme: const InputDecorationTheme(
        hintStyle: TextStyle(fontSizeFactor: 1),
        labelStyle: TextStyle(fontSizeFactor: 1),
      ),
    ),
    home: const TestFontScale(),
  ));
}

这种方式需要覆盖所有用到的文本样式，适合对Theme有强依赖的场景，但不如方法1彻底（部分第三方组件可能直接读取MediaQuery的textScaler）。

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