Flutter 错误：使用不包含 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

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

Answer 3

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

此外，将 size 声明为 final 并不重要。 处理方向/旋转。

Answer 4

对我们有用的是使用 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;

Answer 5

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

Answer 6

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

main.dart

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

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

WidgetUtils.dart

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;
    }
}

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

Answer 7

有同样的错误

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

Answer 8

将您的代码包装在 Material App 小部件中。 我也遇到了同样的问题，忘记用了，直接退了脚手架。

换句话说，您的 MediaQuery.of(context) 应该在 Material Widget 内。 Material app -> scaffold -> MediaQuery.of(context)

Answer 9

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyAppOne(),
    );
  }
}
class MyAppOne extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyAppOne>{
  @override
  Widget build(BuildContext context){
    return Scaffold(
    );
  }
}

Answer 10

Scaffold内部组件使用MediaQuery来布局其子项，从其源代码可以看出这一点。 因此，它需要包装在一个提供MediaQuery小部件中，例如继承自WidgetsApp的MaterialApp小部件。

要修复您的 MediaQuery.of(context) 应该在 Material Widget 内。 Material app -> scaffold -> MediaQuery.of(context)

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

更多信息： 使用不包含 MediaQuery 的上下文调用 MediaQuery.of()

Answer 11

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

}

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

Answer 12

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

https://stackoverflow.com/a/51550358/4993045

Answer 13

添加 MaterialApp ...

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