颤振 - 直接在材料应用程序中访问 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 [重复]的主要内容,如果未能解决你的问题,请参考以下文章