Question

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

当用户更改字体设置时，字体大小应遵守用户设置。

Answer 1

您可以使用以下方法实现此目的： MediaQuery.textScaleFactorOf（context）

例如：

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

根据文档，此方法

为最近的MediaQuery祖先返回textScaleFactor，如果没有这样的祖先，则返回1.0。

文档：

Answer 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;
    }
}

Answer 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(),
  );

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

3 个答案: