Flutter Error: MediaQuery.of() called with a context that does not contain a MediaQuery

Question

I have been trying to get the size of the whole context view in Flutter. But every time I try I'm getting the above mentioned error. Here's my code:

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

Note: I also tried with a StatefulWidget. Please, help me find what I'm doing wrong here.

Can you show the exact error? PS: don't keep size as final, because it may change when you rotate the phone. — Arnold Parge, May 07 '18 at 14:35

score 105 · Answer 1 · edited May 08 '19 at 09:36

105

You need a MaterialApp or a WidgetsApp around your widget. They provide the MediaQuery. When you call .of(context) flutter will always look up the widget tree to find the widget.

You usually have this in your 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: ...,
    );
  }
}

edited May 08 '19 at 09:36

CopsOnRoad

237,138
77
654
440

answered May 07 '18 at 12:58

Ian

2,944
1
19
19

I have just seen your edits. When you call MediaQuery.of(context), the MaterialApp must already be in the widget three. – Ian May 08 '18 at 13:10
I had same problem but just in first run i had this error and second run and more works correctly. – Mo Meshkani Sep 24 '18 at 18:37
Encountered the same question as @MohammadMeshkani mentioned, error disappear at second run – chunhunghan Mar 07 '19 at 06:53
Still i am having this problem. – Emon Aug 19 '20 at 15:26

score 26 · Answer 2 · answered Feb 26 '20 at 13:42

26

What works for us is using WidgetsBinding.instance.window instead of MediaQuery - also when setting the theme of the 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;

answered Feb 26 '20 at 13:42

derChris

726
8
19

1

two different result in `WidgetsBinding.instance.window.padding.top` and `MediaQuery.of(context).padding.top;` – BIS Tech May 09 '20 at 15:56
@BloodLoss You can use `WidgetsBinding.instance.window.viewPadding` instead – intraector Jan 11 '21 at 08:28
6

`MediaQueryData.fromWindow(WidgetsBinding.instance.window)` gives you the same object back as `MediaQuery.of(context)` and it does the device pixel ratio calculations for you, which the above won't. Pretty much the same solution but with some extra fluff. – Royston46 Mar 18 '21 at 16:04
@Royston46 What kind of *device pixel ratio calculations* does `MediaQueryData.fromWindow` do? I just tested it and they both gave me the same number. – Banana Dec 04 '21 at 15:36

score 20 · Answer 3 · edited May 08 '19 at 09:37

You can access MediaQuery when you are inside MaterialApp. The place where you are accessing the media query is not correct.

Please refer below code:

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

I've purposely created a class CommonThings which has static Size so that you can use it throughout the app.

score 16 · Answer 4 · edited Mar 13 '19 at 09:30

I fixed it by using the following method. First I created a new class named MyWidget and returned it in MyApp within a MaterialApp's home:. Refer code below:

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

Also, declaring size as final doesn't matter. Orientation/Rotation is handled.

What a weird behaviour. Used WidgetsBinding.instance.window.physicalSize instead — Mikhail Baynov, Dec 07 '20 at 11:50

score 12 · Answer 5 · answered Nov 21 '19 at 10:22

12

Solved by re-run the app(click on stop button in android studio then run again)

answered Nov 21 '19 at 10:22

user3374790

227
3
13

1

This will only work if you changed your code in between those runs. – Banana Dec 04 '21 at 15:31

score 5 · Answer 6 · answered Aug 04 '19 at 10:10

There is better way. Above solutions would require you to have only one screen widget or inherit all screens from parent class. But there is solution, place the media query initialization into onGenerateRoute callback function

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

Warning: It is not copy & paste code, there are some singletons etc. but you should get the point ;)

score 4 · Answer 7 · edited Jan 16 '20 at 09:35

Had the same error in

import 'screens/tasks_screen.dart';

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

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

  }
}

I solved it by:-

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

score 3 · Answer 8 · answered Jul 21 '19 at 06:49

Wrap your code in a Material App widget. I also had the same issue as I forgot to use it and directly returned the scaffold.

In other words, your MediaQuery.of(context) should be inside the Material Widget. Material app -> scaffold -> MediaQuery.of(context)

score 3 · Answer 9 · edited Sep 30 '19 at 03:01

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

score 2 · Answer 10 · edited Oct 22 '20 at 13:27

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

}

YOU SHOULD TRY THIS I HAVE DONE IT.

score 1 · Answer 11 · answered Jun 06 '20 at 08:23

1

I was trying to change the package then this error arise, so make sure you complete each of the following steps

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

answered Jun 06 '20 at 08:23

Umer Waqas - Top rated dev

3,072
29
26

score -2 · Answer 12 · edited Nov 27 '21 at 09:00

-2

Add MaterialApp ...

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

edited Nov 27 '21 at 09:00

Wai Ha Lee

8,598
83
57
92

answered Apr 06 '19 at 01:31

Antonio Rabelo

27
1

Flutter Error: MediaQuery.of() called with a context that does not contain a MediaQuery

12 Answers12

Linked

Related