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