使用不包含 MediaQuery 的上下文调用 MediaQuery.of()，即使在 MaterialApp 中也是如此
[英]MediaQuery.of() called with a context that does not contain a MediaQuery even when inside MaterialApp
问题描述
Im constantly getting this error while trying to expand the Container to screen's full available width and height.
在尝试将容器扩展到屏幕的完整可用宽度和高度时，我不断收到此错误。 What stresses me out and confuses me is that it is inside Scaffold which is inside MaterialApp but still it throws this stupid error what do I do now?让我感到压力和困惑的是，它位于 MaterialApp 内部的 Scaffold 内部，但它仍然抛出这个愚蠢的错误，我现在该怎么办？ Please help.请帮忙。
Why did they made it so difficult to just get the screen size or just expand the container's width 100%?为什么他们很难只获得屏幕尺寸或将容器的宽度扩大 100%？ Im trying to fix this since hours but there is no solution at all.我试图从几个小时开始解决这个问题，但根本没有解决方案。
This is the error:这是错误：
Here is the code:这是代码：
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.grey[800],
body: SafeArea(
child: Column(
children: <Widget>[
Container(
child: Text('asdfasdfsfd'),
),
Expanded(
child: Container(
color: Colors.white,
width: MediaQuery.of(context).size.width,
child: Image.asset('images/cover.jpg')),
),
SizedBox(
height: 5,
),
//
Container(
child: Center(child: Text('Folder Name')),
),
SizedBox(
height: 5,
),
Container(
child: Slider.adaptive(
value: 0,
onChanged: null,
min: 0,
max: 5,
label: '5',
),
),
//
Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
width: 60,
height: 25,
child: Center(child: Text('08:16')),
),
Container(
width: 60,
height: 25,
child: Center(child: Text('-06:44'))),
],
),
),
SizedBox(
height: 15,
),
// Bottom Third container
Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(
width: 60,
height: 60,
child: FlatButton(
shape: CircleBorder(),
onPressed: () {},
padding: EdgeInsets.all(0.0),
child: Image.asset('images/playbutton.png'),
),
),
Container(
width: 60,
height: 60,
child: FlatButton(
shape: CircleBorder(),
onPressed: () {},
padding: EdgeInsets.all(0.0),
child: Image.asset('images/playbutton.png'),
),
),
Container(
width: 60,
height: 60,
child: FlatButton(
shape: CircleBorder(),
onPressed: () {},
padding: EdgeInsets.all(0.0),
child: Image.asset('images/playbutton.png'),
),
),
Container(
width: 60,
height: 60,
child: FlatButton(
shape: CircleBorder(),
onPressed: () {},
padding: EdgeInsets.all(0.0),
child: Image.asset('images/playbutton.png'),
),
),
],
),
),
SizedBox(
height: 15,
),
// Bottom Second container start
Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(
width: 60,
height: 60,
// Previous Button
child: FlatButton(
shape: CircleBorder(),
onPressed: () {},
padding: EdgeInsets.all(0.0),
child: Image.asset('images/playbutton.png'),
),
),
Container(
width: 60,
height: 60,
// Play Button
child: FlatButton(
shape: CircleBorder(),
onPressed: () {},
padding: EdgeInsets.all(0.0),
child: Image.asset('images/playbutton.png'),
),
),
Container(
width: 60,
height: 60,
// Next Button
child: FlatButton(
shape: CircleBorder(),
onPressed: () {},
padding: EdgeInsets.all(0.0),
child: Image.asset('images/playbutton.png'),
),
),
],
),
),
SizedBox(
height: 20,
),
// Bottom container start
Container(
// 3rd Container
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(
width: 60,
height: 60,
child: FlatButton(
shape: CircleBorder(),
onPressed: () {},
padding: EdgeInsets.all(0.0),
child: Image.asset('images/playbutton.png'),
),
),
Container(
width: 60,
height: 60,
child: FlatButton(
shape: CircleBorder(),
onPressed: () {},
padding: EdgeInsets.all(0.0),
child: Image.asset('images/playbutton.png'),
),
),
Container(
width: 60,
height: 60,
child: FlatButton(
shape: CircleBorder(),
onPressed: () {},
padding: EdgeInsets.all(0.0),
child: Image.asset('images/playbutton.png'),
),
),
Container(
width: 60,
height: 60,
child: FlatButton(
shape: CircleBorder(),
onPressed: () {},
padding: EdgeInsets.all(0.0),
child: Image.asset('images/playbutton.png'),
),
),
],
),
),
SizedBox(
height: 10,
)
],
)),
),
);
}
}
1 个解决方案
解决方案1
2 2020-08-13 23:51:35
While technically MaterialApp is above your query in the tree, the BuildContext context that it currently accesses is above it.虽然从技术上讲， MaterialApp在树中的查询之上，但它当前访问的BuildContext context在它之上。
You need to obtain BuildContext that comes below the MaterialApp .您需要获取MaterialApp下方的BuildContext 。 There are multiple ways this can be done.有多种方法可以做到这一点。
- You can move
MaterialAppout of theMyAppwidget:您可以将MaterialApp移出MyApp小部件：
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(home: MyApp()));//`MaterialApp` moved here
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {//Now this context is below the `MaterialApp`
return Scaffold(
backgroundColor: Colors.grey[800],
body: SafeArea(
child: Column(
children: <Widget>[
Container(
child: Text('asdfasdfsfd'),
),
Expanded(
child: Container(
color: Colors.white,
width: MediaQuery.of(context).size.width,
child: Image.asset('images/cover.jpg')),
),
...
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Builder(//Use `Builder` below `MaterialApp` but above where you need access to proper context
builder: (context) {//Different context provided here
return Scaffold(
backgroundColor: Colors.grey[800],
body: SafeArea(
child: Column(
children: <Widget>[
Container(
child: Text('asdfasdfsfd'),
),
Expanded(
child: Container(
color: Colors.white,
width: MediaQuery.of(context).size.width,
child: Image.asset('images/cover.jpg')),
),
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
即使在MaterialApp小部件下包装了MediaQuery.of（）时，该上下文也不包含MediaQuery - MediaQuery.of() called with a context that does not contain a MediaQuery even when Wrapped under the MaterialApp Widget
使用不包含 MediaQuery 的上下文（来自 MaterialApp）调用 MediaQuery.of() - MediaQuery.of() called with a context (from MaterialApp) that does not contain a MediaQuery
MaterialApp 和“使用不包含 MediaQuery 的上下文调用的 MediaQuery.of()” - MaterialApp and "MediaQuery.of() called with a context that does not contain a MediaQuery"
使用不包含 MediaQuery 的上下文调用 MediaQuery.of() - MediaQuery.of() called with a context that does not contain MediaQuery
MediaQuery.of（）使用不包含MediaQuery的上下文调用 - MediaQuery.of() called with a context that does not contain a MediaQuery
在 MaterialApp 内部。 使用不包含 MediaQuery 的上下文调用 MediaQuery.of() - Inside of MatterialApp. MediaQuery.of() called with a context that does not contain a MediaQuery
Flutter 错误：使用不包含 MediaQuery 的上下文调用 MediaQuery.of() - Flutter Error: MediaQuery.of() called with a context that does not contain a MediaQuery
使用不包含 MediaQuery 的上下文调用 MediaQuery.of()。 （紧急援助） - MediaQuery.of() called with a context that does not contain a MediaQuery. (emergency aid)
使用不包含 MediaQuery 的上下文调用 MediaQuery.of()。 错误 - MediaQuery.of() called with a context that does not contain a MediaQuery. error
在使用不包含 MediaQuery 的上下文调用的 flutter MediaQuery.of() 中出现错误 - Getting Error in flutter MediaQuery.of() called with a context that does not contain a MediaQuery
相关标签