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

Question

我需要让我的整个应用程序独立于设备的字体大小设置。我发现我可以为每个文本视图手动设置

textScaleFactor: 1.0

。对于一些文本小部件来说，这是一个很好的解决方案，但对于具有数十个文本小部件的大型应用程序来说并不好。

Answer 1

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

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

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

找到解决方案here.

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

这样使用：

MaterialApp(
          debugShowCheckedModeBanner: false,
          home: Container(child: SplashScreen()),
          builder: (context, child) {
            return MediaQuery(
              child: child!,
              data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0),
            );
          },
        ),

Answer 4

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

在 Material app 下的 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,
          );
        },
    );
  }

Answer 5

@Pratik Butani 答案绝对正确。但 如果您要返回

GetMaterialApp

或任何其他小部件。请记住

builder

必须在底部。

 return GetMaterialApp(

      theme: ThemeData(
        textTheme: GoogleFonts.aBeeZeeTextTheme(
          Theme.of(context).textTheme
        )
      ),

      initialBinding: MainBinding(),
      debugShowCheckedModeBanner: false,
      initialRoute: Routes.splashRoute,
      getPages: Routes.routes,

        builder:(context,child){
        final mediaQueryData = MediaQuery.of(context);
        final scale = mediaQueryData.textScaleFactor.clamp(0.8, 0.9);
          return MediaQuery(data: MediaQuery.of(context).copyWith(textScaleFactor: scale), child: child!);
        }
    );

Answer 6

这在我的项目中有效

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