时间戳

首页 > 解决方案 > 如何在 MaterialApp 主题中设置 fontSize 的 MediaQuery textScaleFactor

flutter - 如何在 MaterialApp 主题中设置 fontSize 的 MediaQuery textScaleFactor

问题描述

我想在 MaterialApp 主题中设置 MediaQuery，以便在用户更改设置时 FontSize 尊重用户设置。

我尝试创建最终的 curlScale = MediaQuery.of(context).textScaleFactor; 并相应地使用在 MaterialApp 中设置 fontSize: 20 * curlScale，但由于“使用不包含 MediaQuery 的上下文调用 MediaQuery.of()”而出现错误。我该如何解决这个问题。

Widget build(BuildContext context) {
    final curlScale = MediaQuery.of(context).textScaleFactor;
    return MaterialApp(

      title: 'Expense Tracker App',
      theme: ThemeData(
        primarySwatch: Colors.orange,
        accentColor: Colors.limeAccent,
        fontFamily: 'QuickSand',
        errorColor: Colors.red,
        appBarTheme: AppBarTheme(textTheme: ThemeData.light().textTheme.copyWith(
          title: TextStyle(fontFamily: 'Open Sans', fontSize: 16 * curlScale),
          button: TextStyle(color: Colors.white),


          )
          )
      ),
      home: HomePage(),
    );

当用户更改字体设置时，字体大小应尊重用户设置。

标签： flutter

解决方案

您可以通过以下方式实现： MediaQuery.textScaleFactorOf(context)

例如：

textTheme: ThemeData.light().textTheme.copyWith(
                title: TextStyle(
                  fontFamily: 'OpenSans',
                  fontSize: 18 * MediaQuery.textScaleFactorOf(context), 
                ),

根据文档，此方法

返回最近的 MediaQuery 祖先的 textScaleFactor 或 1.0，如果不存在这样的祖先。

文件：

推荐阅读