如何在颤振中使用主题数据中的SizeConfig

Question

为了在flatter中创建响应迅速的应用程序，我使用size\u配置。dart文件，用于处理不同屏幕中代码的响应。我注入sizeConfigures（）。init（上下文） MyApp根小部件下方的code>使应用程序响应。init方法在上下文中缩放宽度、高度和字体大小。我还创建了一些函数，这样我就可以把从Figma设计中得到的字体的精确值，而不是像Sizer软件包中那样的百分比。

getFont（）、getHeight（）、getWidth（）函数接受双倍大小，并根据屏幕为文本创建响应大小。

size\u配置。省道

import 'package:flutter/material.dart';

class SizeConfigs {
  static MediaQueryData _mediaQueryData;
  static double screenWidth;
  static double screenHeight;
  static double defaultSize;
  static Orientation orientation;

  void init(BuildContext context) {
    _mediaQueryData = MediaQuery.of(context);
    screenWidth = _mediaQueryData.size.width;
    screenHeight = _mediaQueryData.size.height;
    orientation = _mediaQueryData.orientation;
    // On iPhone 11 the defaultSize = 10 almost
    // So if the screen size increase or decrease then our defaultSize also vary
    defaultSize = orientation == Orientation.landscape
        ? screenHeight * 0.024
        : screenWidth * 0.024;
  }
}

double getFont(double size) {
  double defaultsSize = SizeConfigs.defaultSize * size;
  return (defaultsSize / 10);
}

// Get the proportionate height as per screen size
double getHeight(double inputHeight) {
  double screenHeight = SizeConfigs.screenHeight;
  // 812 is the layout height that designer use
  return (inputHeight / 812.0) * screenHeight;
}

// Get the proportionate width as per screen size
double getWidth(double inputWidth) {
  double screenWidth = SizeConfigs.screenWidth;
  // 375 is the layout width that Figma provides
  return (inputWidth / 375.0) * screenWidth;
}

我还有一个app\u主题。dart文件，用于存储我在应用程序中使用的主题数据。

app\u主题。省道

class AppTheme {
  //Light Theme Colors
  static Color lightBackgroundColor = const Color(0xffFFFFFF);
  static Color lightPrimaryColor = const Color(0xffF5E8EA);
  static Color lightSecondaryColor = const Color(0xff192533);
  static Color iconColor = const Color(0xffEEF0EB);

  ///Light Theme configuration
  static final lightTheme = ThemeData(
    textTheme: lightTextTheme,
    brightness: Brightness.light,
    backgroundColor: lightBackgroundColor,
    primaryColorLight: lightPrimaryColor,
    accentColor: lightSecondaryColor,
    selectedRowColor: tertiaryColor,
    unselectedWidgetColor: iconColor,
    toggleButtonsTheme:
        ToggleButtonsThemeData(color: tertiaryColor, disabledColor: iconColor),
    //buttonTheme: ButtonThemeData(buttonColor: tertiaryColor),
    toggleableActiveColor: tertiaryColor,
    visualDensity: VisualDensity.adaptivePlatformDensity,
  );
  ///Light TextTheme configuration
  static final TextTheme lightTextTheme = TextTheme(
    headline4: _mainTitle,
    headline5: _title,
    subtitle1: _subtitle,
    bodyText1: _body,
    bodyText2: _detail,
  );
  /// Main Title
  static final TextStyle _mainTitle = TextStyle(
    fontFamily: "RedHatDisplay-Black",
    fontSize: 36,
  );

  /// Title
  static final TextStyle _title = TextStyle(
    fontFamily: "RedHatDisplay-Bold",
    fontSize: 28,
  );

  /// Subtitle
  static final TextStyle _subtitle = TextStyle(
    fontFamily: "RedHatDisplay-Medium",
    fontSize: 18,
  );

  /// Body
  static final TextStyle _body = TextStyle(
    fontFamily: "RedHatDisplay-Regular",
    fontSize: 16,
  );

  /// Detail
  static final TextStyle _detail = TextStyle(
    fontFamily: "RedHatDisplay-Regular",
    fontSize: 14,
  );
}

问题就在这里。ThemeData没有BuildContext，因此MediaQuery在其中不起作用，因此我无法在TextStyle的fontSize参数中调用我的getFont（）函数。

我要做的是使用copyWith方法，并用函数重写fontSize属性。

     Text(
            'HomeScreen',
            style: Theme.of(context).textTheme.headline4.copyWith(fontSize: getFont(18)),
          ),

我只想使用主题。关于（上下文）。headline4无论我在哪里需要它们，它的字体都应该起到响应的作用，TextStyle应该能够使用我的getFont（）函数。

  static final TextStyle _mainTitle = TextStyle(
    fontFamily: "RedHatDisplay-Black",
   //This should take in the getFont function from the SizeConfigs.
    fontSize: getFont(36),
  );

TL；DR-我想要一种方法，将使用BuildContext的MediQuery数据（SizeConfigs）传递给没有BuildContext的主题数据。

Answer 1

某些属性需要上下文才能获取其值
全局使用这些属性（不提供上下文），

• 在初始小部件（或构建器）中，从build方法全局设置屏幕高度、屏幕宽度等值

一旦全局设置了这些参数，就不需要在任何时候传递上下文。