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

Posted

技术标签:

【中文标题】颤振 - 直接在材料应用程序中访问 MediaQuery.of(context).size [重复]【英文标题】:flutter - Access MediaQuery.of(context).size directly in material app [duplicate] 【发布时间】: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 文件中 在哪里?我不知道在哪里放置它。 是的,谢谢,我会回答我自己的问题。 【参考方案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;
  

【讨论】:

以上是关于颤振 - 直接在材料应用程序中访问 MediaQuery.of(context).size [重复]的主要内容,如果未能解决你的问题,请参考以下文章

颤振未找到材料小部件

库比蒂诺相当于“材料”

如何使用颤振访问 JSON 对象?

在颤振单元测试中访问 rootBundle

带颤振的导航轨道

如何在没有互联网访问的情况下运行颤振应用程序