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

uqjltbpv  于 2022-11-17  发布在  Flutter
关注(0)|答案(5)|浏览(199)

我需要让我的整个应用程序独立于设备的字体大小设置。我发现我可以为每个文本视图手动设置textScaleFactor: 1.0。这是一个很好的解决方案,为少数文本小部件,但不好的大应用程序与几十个文本小部件。

a8jjtwal

a8jjtwal1#

首先,我必须说,让文本与手机设置无关是一个坏主意。这会让你的应用程序对盲人或运动障碍等残疾用户不太友好。作为开发人员,你应该确保在字体大小增加时,布局有足够的空间来呈现所有内容。但有时我们实际上需要固定字体大小。
您所要做的就是创建材质应用程序构建器以设置媒体查询属性“textScaleFactor:1.0英寸(适用于整个应用程序)。

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

在此处找到解决方案。

o0lyfsai

o0lyfsai2#

你是对的,将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提供了下限和上限。
来源:Restricting system textScaleFactor, when you have to

x33g5p2x

x33g5p2x3#

这样使用:

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

olhwl3o24#

@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!);
        }
    );
qnakjoqk

qnakjoqk5#

这里是防止更改设备字体设置时中断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,
          );
        },
    );
  }

相关问题