MediaQuery.of() called with a context that does not contain a MediaQuery even when inside MaterialApp

Question

Im constantly getting this error while trying to expand the Container to screen's full available width and height. What stresses me out and confuses me is that it is inside Scaffold which is inside MaterialApp but still it throws this stupid error what do I do now? Please help.

Why did they made it so difficult to just get the screen size or just expand the container's width 100%? Im trying to fix this since hours but there is no solution at all.

This is the error:

Here is the code:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.grey[800],
        body: SafeArea(
            child: Column(
          children: <Widget>[
            Container(
              child: Text('asdfasdfsfd'),
            ),

            
            Expanded(
              child: Container(
                  color: Colors.white,
                  width: MediaQuery.of(context).size.width,
                  child: Image.asset('images/cover.jpg')),
            ),
            SizedBox(
              height: 5,
            ),
            // 
            Container(
              child: Center(child: Text('Folder Name')),
            ),
            SizedBox(
              height: 5,
            ),

            Container(
              child: Slider.adaptive(
                value: 0,
                onChanged: null,
                min: 0,
                max: 5,
                label: '5',
              ),
            ),
            // 
            Container(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  Container(
                    width: 60,
                    height: 25,
                    child: Center(child: Text('08:16')),
                  ),
                  Container(
                      width: 60,
                      height: 25,
                      child: Center(child: Text('-06:44'))),
                ],
              ),
            ),
            SizedBox(
              height: 15,
            ),
            // Bottom Third container
            Container(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  Container(
                    width: 60,
                    height: 60,
                    child: FlatButton(
                      shape: CircleBorder(),
                      onPressed: () {},
                      padding: EdgeInsets.all(0.0),
                      child: Image.asset('images/playbutton.png'),
                    ),
                  ),
                  Container(
                    width: 60,
                    height: 60,
                    child: FlatButton(
                      shape: CircleBorder(),
                      onPressed: () {},
                      padding: EdgeInsets.all(0.0),
                      child: Image.asset('images/playbutton.png'),
                    ),
                  ),
                  Container(
                    width: 60,
                    height: 60,
                    child: FlatButton(
                      shape: CircleBorder(),
                      onPressed: () {},
                      padding: EdgeInsets.all(0.0),
                      child: Image.asset('images/playbutton.png'),
                    ),
                  ),
                  Container(
                    width: 60,
                    height: 60,
                    child: FlatButton(
                      shape: CircleBorder(),
                      onPressed: () {},
                      padding: EdgeInsets.all(0.0),
                      child: Image.asset('images/playbutton.png'),
                    ),
                  ),
                ],
              ),
            ),
            SizedBox(
              height: 15,
            ),
            // Bottom Second container start
            Container(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  Container(
                    width: 60,
                    height: 60,
                    // Previous Button
                    child: FlatButton(
                      shape: CircleBorder(),
                      onPressed: () {},
                      padding: EdgeInsets.all(0.0),
                      child: Image.asset('images/playbutton.png'),
                    ),
                  ),
                  Container(
                    width: 60,
                    height: 60,
                    // Play Button
                    child: FlatButton(
                      shape: CircleBorder(),
                      onPressed: () {},
                      padding: EdgeInsets.all(0.0),
                      child: Image.asset('images/playbutton.png'),
                    ),
                  ),
                  Container(
                    width: 60,
                    height: 60,
                    // Next Button
                    child: FlatButton(
                      shape: CircleBorder(),
                      onPressed: () {},
                      padding: EdgeInsets.all(0.0),
                      child: Image.asset('images/playbutton.png'),
                    ),
                  ),
                ],
              ),
            ),
            SizedBox(
              height: 20,
            ),
            // Bottom container start
            Container(
              // 3rd Container
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  Container(
                    width: 60,
                    height: 60,
                    child: FlatButton(
                      shape: CircleBorder(),
                      onPressed: () {},
                      padding: EdgeInsets.all(0.0),
                      child: Image.asset('images/playbutton.png'),
                    ),
                  ),
                  Container(
                    width: 60,
                    height: 60,
                    child: FlatButton(
                      shape: CircleBorder(),
                      onPressed: () {},
                      padding: EdgeInsets.all(0.0),
                      child: Image.asset('images/playbutton.png'),
                    ),
                  ),
                  Container(
                    width: 60,
                    height: 60,
                    child: FlatButton(
                      shape: CircleBorder(),
                      onPressed: () {},
                      padding: EdgeInsets.all(0.0),
                      child: Image.asset('images/playbutton.png'),
                    ),
                  ),
                  Container(
                    width: 60,
                    height: 60,
                    child: FlatButton(
                      shape: CircleBorder(),
                      onPressed: () {},
                      padding: EdgeInsets.all(0.0),
                      child: Image.asset('images/playbutton.png'),
                    ),
                  ),
                ],
              ),
            ),
            SizedBox(
              height: 10,
            )
          ],
        )),
      ),
    );
  }
}

Answer 1

While technically MaterialApp is above your query in the tree, the BuildContext context that it currently accesses is above it.

You need to obtain BuildContext that comes below the MaterialApp. There are multiple ways this can be done.

1. You can move MaterialApp out of the MyApp widget:

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(home: MyApp()));//`MaterialApp` moved here
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {//Now this context is below the `MaterialApp`
    return Scaffold(
        backgroundColor: Colors.grey[800],
        body: SafeArea(
            child: Column(
          children: <Widget>[
            Container(
              child: Text('asdfasdfsfd'),
            ),

            Expanded(
              child: Container(
                  color: Colors.white,
                  width: MediaQuery.of(context).size.width,
                  child: Image.asset('images/cover.jpg')),
            ),
   ...

2. Use a Builder to obtain a different BuildContext

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Builder(//Use `Builder` below `MaterialApp` but above where you need access to proper context
        builder: (context) {//Different context provided here
          return Scaffold(
            backgroundColor: Colors.grey[800],
            body: SafeArea(
              child: Column(
                children: <Widget>[
                  Container(
                    child: Text('asdfasdfsfd'),
                  ),

            
            Expanded(
              child: Container(
                  color: Colors.white,
                  width: MediaQuery.of(context).size.width,
                  child: Image.asset('images/cover.jpg')),
            ),