如何使 Flutter 应用字体大小独立于设备设置？

Question

我需要让我的整个应用程序独立于设备的字体大小设置。我发现我可以textScaleFactor: 1.0手动设置每个文本视图。对于一些 Text 小部件来说，这是一个很好的解决方案，但对于具有数十个 Text 小部件的大型应用程序来说并不好。

Answer 1

首先，我必须说，让您的文本与手机设置无关是个坏主意。它使您的应用程序对失明或运动障碍等残障用户不那么友好。作为开发人员，您应该确保您的布局有足够的空间在字体大小增加时呈现所有内容。但有时我们实际上需要固定字体大小。

您所要做的就是创建 Material App Builder 来为整个应用程序设置媒体查询属性“textScaleFactor: 1.0”。

MaterialApp(
  builder: (context, child) {
    return MediaQuery(
      child: child,
      data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0),
    );
   },
)

解决方案在这里找到。

Answer 2

你是对的Oleksandr，将 textScaleFactor 设置为 1.0 并称之为一天意味着忽略用户的需求。他们要求更大的文字大小，而您却没有提供。

让我们让它更具适应性

您可以选择最小因子和最大因子，并且可以进行比较。

return MaterialApp(
        builder: (context, child) {
          final mediaQueryData = MediaQuery.of(context);
          final scale = mediaQueryData.textScaleFactor.clamp(1.0, 1.3);
          return MediaQuery(
            child: child,
            data: MediaQuery.of(context).copyWith(textScaleFactor: scale),
          );
        },
);

我们可以给出一个受约束的系统值，而不是硬编码的textScaleFactor。

通过使用clamp()，我们给系统textScaleFactor一个下限和上限。

来源：限制系统 textScaleFactor，当你必须

Answer 3

这是防止更改设备字体设置时破坏 UI 的简单解决方案

使用此代码在 Material 应用程序下的 main.dart 内进行解决方案

 builder: (context, child) {
              return MediaQuery(
                data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0),
                child: child,
              );
            },

这里是示例代码

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'App Title',
        theme: theme(),
        initialRoute: SplashScreen.routeName,
        routes: routes,
        ///Here the code for prevent font size when change mobile
        builder: (context, child) {
          return MediaQuery(
            data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0),
            child: child,
          );
        },
    );
  }