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

Question

So... I'm getting this exception that the MediaQuery.of gets called with a context that does not contain MediaQuery.

Codes:

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

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
    double topPadding = getRelativeTopPadding(context);

    return MaterialApp(
    home: Scaffold(
        body: Stack(
        children: <Widget>[
            Align(
            alignment: Alignment.center,
            child: Container(
                margin: const EdgeInsets.only(right: 15, left: 15),
                child: Column(children: <Widget>[
                new Padding(
                    padding: EdgeInsets.only(top: topPadding),
                ),
                ],),
            ),
            ),
        ],
        ),
    ),
    );
}

double getRelativeTopPadding(BuildContext context) {
    return MediaQuery.of(context).size.width * 0.5;
}
}

Exception:

I/flutter ( 6765): ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
I/flutter ( 6765): The following assertion was thrown building MyApp(dirty):
I/flutter ( 6765): MediaQuery.of() called with a context that does not contain a MediaQuery.
I/flutter ( 6765): No MediaQuery ancestor could be found starting from the context that was passed to MediaQuery.of().
I/flutter ( 6765): This can happen because you do not have a WidgetsApp or MaterialApp widget (those widgets introduce
I/flutter ( 6765): a MediaQuery), or it can happen if the context you use comes from a widget above those widgets.
I/flutter ( 6765): The context used was:
I/flutter ( 6765):   MyApp(dirty)

What did I do wrong? I thought the BuildContext from MaterialApp does contain the MediaQuery?

Answer 1

Just to extend on my comment, here is what you need to do.

your material app will be looking like this

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var materialApp = MaterialApp(home: HomePage());
    return materialApp;
  }
}

and you HomePage should be like this

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    double topPadding = getRelativeTopPadding(context);
    return Scaffold(
      body: Container(
        child: Stack(
          fit: StackFit.expand,
          children: <Widget>[
            Align(
              alignment: Alignment.center,
              child: Container(
                padding: EdgeInsets.only(top: topPadding),
                margin: const EdgeInsets.only(right: 15, left: 15),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: <Widget>[
                    // new Padding(
                    // padding: EdgeInsets.only(top: topPadding),
                    // ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  double getRelativeTopPadding(BuildContext context) {
    return MediaQuery.of(context).size.width * 0.5;
  }
}