颤振 - 直接在材料应用程序中访问 MediaQuery.of(context).size [重复]答案

【问题标题】：flutter - Access MediaQuery.of(context).size directly in material app [duplicate]颤振 - 直接在材料应用程序中访问 MediaQuery.of(context).size [重复]
【发布时间】：2020-12-04 06:49:17
【问题描述】：

我想让我的应用程序响应并这样做，我需要直接在材料应用程序中访问设备的宽度，以便主题可以在功能中调整他的大小......当我尝试这样做时，这发生错误：MediaQuery.of() called with a context that does not contain a MediaQuery.

如何解决？

这是我的主类代码：


void main() {
  runApp(
      MultiProvider(
          providers: [
            ChangeNotifierProvider(create: (_) => PlayerProvider()),
            ChangeNotifierProvider(create: (_) => QuestionsProvider()),
            ChangeNotifierProvider(create: (_) => SettingsProvider()),
            ChangeNotifierProvider(create: (_) => CategoryProvider()),
            ChangeNotifierProvider(create: (_) => FirebaseMessagingProvider()),
            ChangeNotifierProvider(create: (_) => TeamQuestionsProvider()),
            ChangeNotifierProvider(create: (_) => AppLanguageProvider()),
          ],
          child: BuvonsApp(),
      )
  );
}

// ignore: must_be_immutable
class BuvonsApp extends StatelessWidget {
  FirebaseAnalytics analytics = FirebaseAnalytics();
  BuildContext myContext;
  @override
  Widget build(BuildContext context) {
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.portraitUp,
    ]);
    Provider.of<FirebaseMessagingProvider>(context, listen: false).init();
    Provider.of<SettingsProvider>(context, listen: false).initSharedPreferences();
    Provider.of<AppLanguageProvider>(context, listen: false).fetchLocale();
    return Consumer<AppLanguageProvider>(builder: (context, model, child) {
      return MaterialApp(
        debugShowCheckedModeBanner: false,
        navigatorObservers: [
          FirebaseAnalyticsObserver(analytics: analytics),
        ],
        title: 'Buvons',
        theme: ThemeData(
          brightness: Brightness.light,
          sliderTheme: SliderThemeData(
              valueIndicatorColor: Colors.orange,
              valueIndicatorTextStyle: GoogleFonts.rubik(fontSize: ResponsiveSize().responsiveSize(17, context), fontWeight: FontWeight.bold, color: Colors.white)
          ),
          textTheme: GoogleFonts.rubikTextTheme()
              .copyWith(bodyText2: GoogleFonts.rubik(fontSize: ResponsiveSize().responsiveSize(17, context), fontWeight: FontWeight.bold, color: Colors.white))
              .copyWith(subtitle1: GoogleFonts.rubik(fontSize: ResponsiveSize().responsiveSize(17, context), fontWeight: FontWeight.bold, color: Colors.grey[700]))
              .copyWith(subtitle2: GoogleFonts.rubik(fontSize: ResponsiveSize().responsiveSize(17, context), fontWeight: FontWeight.bold, color: Colors.grey[700]))
              .copyWith(headline5: GoogleFonts.rubik(fontSize: ResponsiveSize().responsiveSize(10, context), fontWeight: FontWeight.bold, color: Colors.white)),
          appBarTheme: AppBarTheme(
            centerTitle: true,
            iconTheme: IconThemeData(color: Colors.white),
            textTheme: GoogleFonts.rubikTextTheme()

                .copyWith(headline6: GoogleFonts.rubik(fontSize: ResponsiveSize().responsiveSize(25, context), fontWeight: FontWeight.bold, color: Colors.white)),
          ),
          tabBarTheme: TabBarTheme(
            labelColor: Colors.white,
            labelStyle: GoogleFonts.rubik(fontSize: ResponsiveSize().responsiveSize(15, context), fontWeight: FontWeight.bold),
            unselectedLabelColor: Colors.grey[100],
            unselectedLabelStyle: GoogleFonts.rubik(fontSize: ResponsiveSize().responsiveSize(13, context), fontWeight: FontWeight.bold),
          ),
          primarySwatch: Colors.orange,
          splashColor: Colors.orangeAccent,
          secondaryHeaderColor: Colors.orangeAccent,
          dividerColor: Colors.orange,
          visualDensity: VisualDensity.adaptivePlatformDensity,
        ),
        home: SplashScreen(),
        navigatorKey: navigatorKey,
        locale: Provider.of<AppLanguageProvider>(context).appLocal,
        localizationsDelegates: [
          AppLocalizations.delegate,
          GlobalMaterialLocalizations.delegate,
          GlobalCupertinoLocalizations.delegate,
          GlobalWidgetsLocalizations.delegate,
        ],
        supportedLocales: [
          const Locale('en'),
          const Locale('fr'),
          const Locale('es'),
          // const Locale('de'),
          // const Locale('pl'),
        ],
      );
    },);
  }
}

那些ResponsiveSize().responsiveSize(15, context) 会根据设备的大小返回一个双精度值！

这里是 responsiveSize 函数：

double responsiveSize(double size, BuildContext context) {
    double shortestSideSize = MediaQuery.of(context).size.shortestSide;
    if (shortestSideSize < 450) {
      return size;
    } else if (shortestSideSize >= 450 && shortestSideSize < 850) {
      return size*1.5;
    } else {
      return size*2;
    }
  }

【问题讨论】：

将 responsiveSize() 放在与 MaterialApp 相同的 dart 文件中
在哪里？我不知道在哪里放置它。
是的，谢谢，我会回答我自己的问题。

标签： android ios flutter responsive-design

【解决方案1】：

感谢@Bruno Hugentobler Lipper，我解决了这个问题

所以我改变了我的函数，所以我不必使用上下文，我把它和我的主类放在同一个文件中。

函数如下：

double _responsiveSize(double size) {
  double shortestSideSize = WidgetsBinding.instance.window.physicalSize.width/WidgetsBinding.instance.window.devicePixelRatio;
  if (shortestSideSize < 450) {
    return size;
  } else if (shortestSideSize >= 450 && shortestSideSize < 850) {
    return size*1.5;
  } else {
    return size*2;
  }
}

【讨论】：