MaterialApp and "MediaQuery.of() called with a context that does not contain a MediaQuery"

Question

I am recieving the following error When i attempt to use MediaQuery in my App:

"MediaQuery.of() called with a context that does not contain a MediaQuery"

I have done some research and everything i read says that if i use either MaterialApp or WidgetsApp i should have access to MediaQuery.

However I am using MaterialApp as a parent widget from the location i am using MediaQuery... so i dont understand why i dont have access to the MediaQuery in the context that i am using...??

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

class MyApp extends StatelessWidget {
  List<Map<String, String>> elementList;
  String elementName;

  MyApp() {
    this.elementName = "TestName";
    this.elementList = List<Map<String, String>>();
    this.elementList.add({"element1": "Value1"});
    this.elementList.add({"element2": "Value2"});
    this.elementList.add({"element3": "Value3"});
  }
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Column(
        children: <Widget>[

          Container(
            height: MediaQuery.of(context).size.height * 0.15,
            child: UNavbar(),
            ),

          Container(
            height: MediaQuery.of(context).size.height * 0.7,
            child: ListView.builder(              
              itemBuilder: (ctx, index) {
               return UNode(elementName, elementList);              
              }              
            )
          ),          
          Container(
            height: MediaQuery.of(context).size.height * 0.15,
            alignment: Alignment.bottomCenter,
            child: UTextbox(),
          ),

        ],
      ),
    );
  }
}```

Answer 1

I think MediaQuery require any parent widget which have Mediadata as Materialapp have, so if you create a separate widget which contain MaterialApp widget and then put all other code in separate widget. it will work.

Note : I replaced all your widget with text widget and i wrap column with scaffold other wise you will get black screen.

Following code help you more about it.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  List<Map<String, String>> elementList;
  String elementName;

  MyApp() {
    this.elementName = "TestName";
    this.elementList = List<Map<String, String>>();
    this.elementList.add({"element1": "Value1"});
    this.elementList.add({"element2": "Value2"});
    this.elementList.add({"element3": "Value3"});
  }
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: Home());
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
     body: Column(
      children: <Widget>[
        Container(
          height: MediaQuery.of(context).size.height * 0.15,
          child: Text(""),
        ),
        Container(
            height: MediaQuery.of(context).size.height * 0.7,
            child: ListView.builder(itemBuilder: (ctx, index) {
              return Text("");
            })),
        Container(
          height: MediaQuery.of(context).size.height * 0.15,
          alignment: Alignment.bottomCenter,
          child: Text("data"),
        ),
      ],
    ));
  }
}

Answer 2

The issue is happening because the context you are using in the MediaQuery won't have a MaterialApp associated with that. It's passed as an argument of the build method and you are creating the material app inside the same build method. To fix this you can use the Builder widget.

home: Builder(builder: (context) {
  return Column(
     children: <Widget>[
       Container(
         height: MediaQuery.of(context).size.height * 0.15,
         child: UNavbar(),
         ),
       // Remaining Children
     ],
  );
),