Flutter中如何使用ThemeData中的SizeConfig

如何解决Flutter中如何使用ThemeData中的SizeConfig

为了在 Flutter 中创建响应式应用程序，我使用 size_configs.dart 文件处理不同屏幕中代码的响应性。我在 SizeConfigs().init(context); 根小部件下方注入 MyApp 以使应用具有响应性。 init 方法接受一个上下文来缩放宽度、高度和字体大小。我还创建了函数，以便我可以输入从 figma 设计中获得的字体的确切值，而不是像 Sizer 包中那样的百分比。

getFont()、getHeight()、getWidth() 函数接受双精度值并根据屏幕为文本创建响应大小。

size_configs.dart

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_theme.dart 文件，用于存储我在应用中使用的 ThemeData。

app_theme.dart

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 无法在其中工作，因此我无法在 getFont() 的 fontSize 参数中调用我的 TextStyle 函数。

我所做的是使用 copyWith 方法并用函数覆盖 fontSize 属性。

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

我只想在需要的地方使用 Theme.of(context).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 的 ThemeData 的方法。

解决方法

某些属性需要上下文来获取它们的值。
要全局使用此类属性（不提供上下文），

• 在您的初始小部件（或构建器）中，通过构建方法全局设置屏幕高度、屏幕宽度等值。
• 将 getFont 函数与 SizeConfig 分开，使其全局可访问，将 SizeConfig.* 替换为全局参数。

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