Dart 颤振错误：使用不包含MediaQuery的上下文调用MediaQuery.of（）

我一直试图在Flutter中获得整个上下文视图的大小。但每次我尝试，我都会得到上面提到的错误。 这是我的密码：

import 'package:flutter/material.dart';

void main => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    final size = MediaQuery.of(context).size;
    return new MaterialApp(
      home: new Scaffold(),
    );
  }
}

注意：我还尝试了一个

StatefulWidget

。

---

请帮我找出我做错了什么。

您需要在小部件周围安装一个

MaterialApp

或

WidgetsApp

。它们提供了

MediaQuery

。当您调用（上下文）的

.of

时，flatter将始终查找小部件树以查找小部件

您通常会将其放在主目录中。省道：

void main() => runApp(App());

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Title',
      theme: kThemeData,
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;

    return Container(
      child: ...,
    );
  }
}

---

当您在

MaterialApp

内时，可以访问

MediaQuery

。访问媒体查询的位置不正确

请参阅以下代码：

import 'package:flutter/material.dart';

class CommonThings {
  static Size size;
}

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'MediaQuery Demo',
      theme: new ThemeData(
        primarySwatch: Colors.red,
      ),
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    CommonThings.size = MediaQuery.of(context).size;
    print('Width of the screen: ${CommonThings.size.width}');
    return new Container();
  }
}

---

我特意创建了一个具有静态大小的类

CommonThings

，以便您可以在整个应用程序中使用它。

我使用以下方法修复了它。首先，我创建了一个名为

MyWidget

的新类，并在

MaterialApp

的

home:

中返回它。请参阅下面的代码：

import 'package:flutter/material.dart';

void main => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    return new MaterialApp(
      home: new MyWidget(),
    );
  }
} 

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    final size = MediaQuery.of(context).size;
    return new MaterialApp(
      home: new Scaffold(),
    );
  }
} 

此外，将大小声明为最终大小也无关紧要。方向/旋转已处理。

添加材质应用

void main（）{
runApp（材料应用程序）(
主页：主页（），
));
}

将代码包装在Material应用程序小部件中。我也有同样的问题，因为我忘了使用它，直接退还了脚手架

换句话说，您的MediaQuery.of（context）应该在Material小部件中。

---

Material app->scaffold->MediaQuery.of（context）

有更好的方法。上述解决方案要求您只拥有一个屏幕小部件，或者继承父类中的所有屏幕但有解决方案，将媒体查询初始化放在onGenerateRoute回调函数中

主飞镖

import 'package:flutter/material.dart';

class MyApp extends StatefulWidget {
    @override
    State<StatefulWidget> createState() => new MyAppState();
}

class MyAppState extends State<MyApp> {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'My Awesome App',
        routes: NavigationUtils.routeList(),
        onGenerateRoute: (routeSettings) =>
          NavigationUtils.onGenerateRoute(routeSettings),
      );
    }
}

WidgetUtils.dart

import 'package:flutter/material.dart';

class NavigationUtils {
    static onGenerateRoute(RouteSettings routeSettings) {   
      return new MaterialPageRoute(
        builder: (context) {
          WidgetUtils.me.init(context);
            return StorageUtils.me.isLogged() ? HomeScreen() : ForkScreen();
        },
        settings: routeSettings,
      );
    }
}

import 'package:flutter/material.dart';

class WidgetUtils {
    MediaQueryData _mediaQueryData;
    double _screenWidth;
    double _screenHeight;
    double _blockSizeHorizontal;
    double _blockSizeVertical;

    init(BuildContext context) {
        _mediaQueryData = MediaQuery.of(context);
        screenWidth = _mediaQueryData.size.width;
        screenHeight = _mediaQueryData.size.height;
        blockSizeHorizontal = screenWidth / 100;
        blockSizeVertical = screenHeight / 100;
    }
}

警告：这不是复制粘贴代码，有一些单例等，但你应该明白；）

void main（）=>runApp（MyApp（））；
类MyApp扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回材料PP(
debugShowCheckedModeBanner:false，
主页：MyAppOne（），
);
}
}
类MyAppOne扩展StatefulWidget{
@凌驾
_MyAppState createState（）=>\u MyAppState（）；
}
类MyAppState扩展了状态{
@凌驾
小部件构建（构建上下文）{
返回脚手架(
);
}
}

通过重新运行应用程序解决（在android studio中单击停止按钮，然后再次运行）

在

import 'screens/tasks_screen.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return TasksScreen();

  }
}

我通过以下方式解决了这个问题：-

import 'package:flutter/material.dart';
import 'screens/tasks_screen.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: TasksScreen(),
    );
  }
}

---

对我们有效的方法是使用WidgetsBinding.instance.window而不是MediaQuery-同样在设置MaterialApp的主题时：

_pixelRatio = WidgetsBinding.instance.window.devicePixelRatio;
_screenWidth = WidgetsBinding.instance.window.physicalSize.width;
_screenHeight = WidgetsBinding.instance.window.physicalSize.height;
_statusBarHeight = WidgetsBinding.instance.window.padding.top;
_bottomBarHeight = WidgetsBinding.instance.window.padding.bottom;
_textScaleFactor = WidgetsBinding.instance.window.textScaleFactor;

---

我试图更改程序包，然后出现了这个错误， 因此，请确保完成以下每个步骤

---

MediaQuery

由

Scaffold

内部组件使用，以布局其子级，这一点从其。因此，它需要包装在一个小部件中，该小部件将提供一个

MediaQuery

，就像

MaterialApp

小部件一样，它继承自

WidgetsApp

要修复您的MediaQuery.of（context）应该位于Material小部件中。材料应用->脚手架->MediaQuery.of（上下文）

更多信息：

---

你应该试试这个，我已经做了。

如何显示页面？void main（）=>runApp（新的MyIntroductionPage（））；你能说出准确的错误吗？PS：不要将大小保留为最终大小，因为当你旋转手机时，大小可能会改变。@ArnoldParge确切的错误在标题中给出。我刚刚看到你的编辑。当您调用MediaQuery.of（context）时，MaterialApp必须已经在小部件3中。我遇到了相同的问题，但在第一次运行时，我出现了此错误，第二次运行时，其他操作都正确。遇到了与@MohammadMeshkani提到的相同问题，错误在第二次运行时消失我遇到了这个问题。两种不同的结果是

WidgetsBinding.instance.window.padding.top

和

MediaQuery.of（context.padding.top@derChris非常感谢。这对我很有效D@BloodLoss您可以使用
WidgetsBinding.instance.window.viewPadding
代替
MediaQueryData.fromWindow（WidgetsBinding.instance.window）
返回与
MediaQuery.of（context）
相同的对象，并为您进行设备像素比计算，而上述操作不会。几乎相同的解决方案，但有一些额外的绒毛。多么奇怪的行为。改为使用WidgetsBinding.instance.window.physicalSize
_pixelRatio = WidgetsBinding.instance.window.devicePixelRatio;
_screenWidth = WidgetsBinding.instance.window.physicalSize.width;
_screenHeight = WidgetsBinding.instance.window.physicalSize.height;
_statusBarHeight = WidgetsBinding.instance.window.padding.top;
_bottomBarHeight = WidgetsBinding.instance.window.padding.bottom;
_textScaleFactor = WidgetsBinding.instance.window.textScaleFactor;

class MyApp extends StatelessWidget {
  // This widget is the root of your application.

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Loading Page',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyAppPage(),
    );
  }
}

import 'package:flutter/material.dart';

void main() => runApp(App());

class App extends StatelessWidget {

  @override
 
 Widget build(BuildContext context) {
    
   return MaterialApp(
    
      home: Scaffold(
      body:HomePage(),
      ),
    );
   }

}


class HomePage extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    var size = MediaQuery.of(context).size.height;

    return Container(
      height:size/2,
      color:Colors.lightBlueAccent,
        
    );
  }

}