Flutter Error：使用不包含MediaQuery的上下文调用MediaQuery.of（）

Question

我一直试图在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。拜托，帮我找到我在这里做错了什么。

Answer 1

你的小部件周围需要一个MaterialApp或WidgetsApp。他们提供MediaQuery。当您调用.of(context)时，flutter将始终查找窗口小部件树以查找窗口小部件。

你通常在main.dart中有这个：

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: ...,
    );
  }
}

Answer 2

当你在MediaQuery里面时，你可以访问MaterialApp。您访问媒体查询的位置不正确。

请参考以下代码：

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，以便您可以在整个应用程序中使用它。

Answer 3

我使用以下方法修复它。首先，我创建了一个名为MyWidget的新类，并在MyApp的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(),
    );
  }
} 

另外，将大小声明为final并不重要。处理方向/旋转。

Answer 4

将您的代码包装在Material App小部件中。我也有同样的问题，因为我忘记使用它并直接返回脚手架。

换句话说，您的MediaQuery.of（上下文）应该在Material Widget中。 Material app - > scaffold - > MediaQuery.of（context）

Answer 5

添加MaterialApp ...

void main() {
  runApp(MaterialApp(
    home: HomePage(),
  ));
}