如何在 MaterialApp 主题中设置 fontSize 的 MediaQuery textScaleFactor答案

【问题标题】：How to set MediaQuery textScaleFactor of fontSize in MaterialApp theme如何在 MaterialApp 主题中设置 fontSize 的 MediaQuery textScaleFactor
【发布时间】：2019-12-11 17:04:53
【问题描述】：

我想在 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(),
    );

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

【问题讨论】：

我看到我们一直在研究同一个教程；) Max 应该更详细地介绍这个主题

标签： flutter

【解决方案1】：

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

例如：

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

根据文档这个方法

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

文档：

【讨论】：

【解决方案2】：

您可以使用以下代码

在您要应用字体的小部件中

Text(
'My font size is 24px o',
style: TextStyle(
color: Colors.cyanAccent,
fontSize: ScreenUtil.getInstance().setSp(24),
)),

这里是缩放字体的主要登录

import 'package:flutter/material.dart';

class ScreenUtil {
static ScreenUtil instance = new ScreenUtil();

double width;
double height;
bool allowFontScaling;

static MediaQueryData _mediaQueryData;
static double _screenWidth;
static double _screenHeight;
static double _pixelRatio;
static double _statusBarHeight;

static double _bottomBarHeight;

static double _textScaleFactor;

ScreenUtil({
    this.width = 1080,
    this.height = 1920,
    this.allowFontScaling = false,
});

static ScreenUtil getInstance() {
    return instance;
}

void init(BuildContext context) {
    MediaQueryData mediaQuery = MediaQuery.of(context);
    _mediaQueryData = mediaQuery;
    _pixelRatio = mediaQuery.devicePixelRatio;
    _screenWidth = mediaQuery.size.width;
    _screenHeight = mediaQuery.size.height;
    _statusBarHeight = mediaQuery.padding.top;
    bottomBarHeight = mediaQueryData.padding.bottom;
    _textScaleFactor = mediaQuery.textScaleFactor;
}

static MediaQueryData get mediaQueryData => _mediaQueryData;
static double get textScaleFactory => _textScaleFactor;
static double get pixelRatio => _pixelRatio;
static double get screenWidthDp => _screenWidth;
static double get screenHeightDp => _screenHeight;
static double get screenWidth => screenWidth * pixelRatio;
static double get screenHeight => screenHeight * pixelRatio;
static double get statusBarHeight => _statusBarHeight;
static double get bottomBarHeight => _bottomBarHeight;
get scaleWidth => _screenWidth / instance.width;
get scaleHeight => _screenHeight / instance.height;
setWidth(double width) => width * scaleWidth;
setHeight(double height) => height * scaleHeight;
setSp(double fontSize) {
print("Scale 10 ${setWidth(fontSize)}");
print("Scale 12 ${ _textScaleFactor}");
print("Scale 11 ${setWidth(fontSize) / _textScaleFactor}");
return allowFontScaling
? setWidth(fontSize)
: setWidth(fontSize) / _textScaleFactor;
    }
}

【讨论】：

我想在 MaterialApp 内部使用，这样我就可以全局定义字体大小，所以最终 curlScale = MediaQuery.of(context).textScaleFactor 无法完成？
@divyadave 您可以将其设置为适用于整个应用程序的文本主题。
bottomBarHeight 是错误的。你忘了_

【解决方案3】：

这里解释：How to create and use responsive themes in Flutter?

您应该使用 builder 属性。

return MaterialApp(
    title: 'Expense Tracker App',
    builder: (ctx, child) {
      return Theme(
          data: ThemeData(
              primarySwatch: Colors.orange,
              accentColor: Colors.limeAccent,
              fontFamily: 'QuickSand',
              errorColor: Colors.red,
              appBarTheme: AppBarTheme(
                  textTheme: ThemeData.light().textTheme.copyWith(
                        headline1: TextStyle(
                            fontFamily: 'Open Sans',
                            fontSize:
                                16 * MediaQuery.of(ctx).textScaleFactor),
                        button: TextStyle(color: Colors.white),
                      ))),
          child: child);
    },
    home: HomePage(),
  );

【讨论】：

【解决方案4】：

你可以这样全局设置

Theme(
  data: ThemeData(
  child: MediaQuery(
    child: widget as Widget,
    data: MediaQuery.of(context).copyWith(textScaleFactor:1.0),
    ),
))

那么每个fontSize都会乘以textScaleFactor

【讨论】：