No MediaQuery widget ancestor found

Question

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'info.dart';

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

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
  List<info> li = [
    info(name: 'text1', length: 170, date: DateTime.now()),
    info(name: 'text2', length: 175, date: DateTime.now()),
    info(name: 'text3', length: 180, date: DateTime.now()),
    info(name: 'text4', length: 180, date: DateTime.now()),
    info(name: 'text5', length: 180, date: DateTime.now()),
    info(name: 'text6', length: 180, date: DateTime.now()),
    info(name: 'text7', length: 180, date: DateTime.now()),
    info(name: 'text8', length: 180, date: DateTime.now()),
    info(name: 'text9', length: 180, date: DateTime.now()),
  ];

  void x (BuildContext ctx){
    showModalBottomSheet(context: ctx, builder: (ctx){
      return ListView.builder(
        itemCount: li.length,
        itemBuilder: (cx , index){
          return Padding(
            padding: EdgeInsets.all(10.0),
            child: Card(
              shadowColor: Colors.red,
              elevation: 10.0,
              color: Colors.blue,

              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Column(
                  children: <Widget>[
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      children: <Widget>[
                        Text(
                          li[index].name,
                          style: TextStyle(color: Colors.white, fontSize: 20),
                        ),
                        Text(
                          '${li[index].length}',
                          style: TextStyle(color: Colors.white, fontSize: 20),
                        ),
                      ],
                    ),
                    Text(
                      '${li[index].date}',
                      style: TextStyle(color: Colors.white, fontSize: 20),
                    ),
                  ],
                ),
              ),
            ),
          );
        },
      );
    });
  }


  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'App name',
      home: Scaffold(
        appBar: AppBar(
          title: Text('This is the App bar'),
        ),
        body: Container(
          padding: EdgeInsets.all(10.0),
          height: double.infinity,
          color: Colors.black,
        ),
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.add),
          onPressed: () => x(context)
        ),
      ),
    );
  }
}

Error:

The following assertion was thrown while handling a gesture: No MediaQuery widget ancestor found.

MyApp widgets require a MediaQuery widget ancestor. The specific widget that could not find a MediaQuery ancestor was: MyApp state: MyAppState#7e07c The ownership chain for the affected widget is: "MyApp ← [root]"

No MediaQuery ancestor could be found starting from the context that was passed to MediaQuery.of(). This can happen because you have not added a WidgetsApp, CupertinoApp, or MaterialApp widget (those widgets introduce a MediaQuery), or it can happen if the context you use comes from a widget above those widgets.

What is wrong in my code? I have already used scaffold and MaterialApp Widgets and the instructor didn't use MediaQuery and I even don't know what that means, but it worked for him!

Answer 1

This is a common mistake that happens when using Inherited Widgets like MediaQuery. Now you may not be using it explicitly but from your description it seems that Flutters' showModalBottomSheet method maybe using it.

The error is telling you that no MediaQuery ancestor(i.e. WidgetsApp, CupertinoApp or MaterialApp) could be found above context. It means above this context:

@override
Widget build(BuildContext context) {
 ...
}

and this is right because you have placed your MaterialApp widget just below this context and when you call x(context) it will look for WidgetsApp, CupertinoApp or MaterialApp above the build method.

There are 2 easy ways of solving this:

1. Create a new Stateless/Stateful widget and pass it to the home parameter OR
2. Use the Builder widget and pass it to the home parameter.

 @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'App name',
      home: Builder(builder: (BuildContext context) { 
      ...
      } ),

Both the solutions will provide you with a new context which will have a MediaQuery widget as its ancestor. It is always helpful to look at the Widget tree in the Widget Inspector.

Answer 2

You might want to do it this way

void main() {runApp(const MaterialApp(home: RandomName() ,));} `

class RandomName extends StatefulWidget {
  const RandomName({Key? key}) : super(key: key);

  @override
  _RandomNameState createState() => _RandomNameState();
}

class _RandomNameState extends State<RandomName> {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

`