No MediaQuery ancestor could be found?

Question

I'm trying to build a Container that is a third of size of the page but i'm getting an error No MediaQuery ancestor could be found starting from the context that was passed to MediaQuery.of(). and I'm not sure why at all. Its in MaterialApp.

My Code:

import 'package:flutter/material.dart';


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

class LoginPage extends StatelessWidget{

  @override
  Widget build(BuildContext context){
    return MaterialApp(
      home: Scaffold(
        body: Container(
          constraints: BoxConstraints.expand(),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[
              Container(
                color: Colors.red,
                width: double.infinity,
                height: MediaQuery.of(context).size.height/3,
              )
            ],
          )
        )
      )
    );
  }
}

Can you try something like this..```void main() => runApp(MaterialApp (home:LoginPage()));```not sure if it works.. just give it a try.. — srikanth7785, May 23 '20 at 08:07
IT WORKED! can you elaborate on why this worked? i have MaterialApp in build function so why would i get this error? — STOPIMACODER, May 23 '20 at 08:09
@STOPIAMACODER, Glad it worked for you.. kindly accept my answer.. — srikanth7785, May 23 '20 at 08:18

score 17 · Accepted Answer · answered May 23 '20 at 08:17

17

You just have to give the MaterialApp as the ancestor..as the error says..

Do it like this..

void main() => runApp(MaterialApp(home:LoginPage()));

answered May 23 '20 at 08:17

srikanth7785

1,382
1
7
22

score 5 · Answer 2 · answered May 23 '20 at 08:10

Your must have a MaterialApp widget because you are using the Material class from your import statement

Check the code below, it works fine:

import 'package:flutter/material.dart';

// wrap your LoginPage widget with a MaterialApp widget
void main() => runApp(MaterialApp(home:LoginPage()));

class LoginPage extends StatelessWidget{

  @override
  Widget build(BuildContext context){
    return MaterialApp(
      home: Scaffold(
        body: Container(
          constraints: BoxConstraints.expand(),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[
              Container(
                color: Colors.red,
                width: double.infinity,
                height: MediaQuery.of(context).size.height/3,
              )
            ],
          )
        )
      )
    );
  }
}

score 2 · Answer 3 · answered Mar 01 '21 at 16:54

None of the solutions worked for me. It was because the showModalBottomSheet tries to access the ancestor of type MaterialApp from the given context.

Use Builder widget to get new context with MaterialApp ancestor

OR

Separate your MaterialAapp and Scaffold widgets into separate widgets.

My solution using Builder :

floatingActionButton: Builder(
  builder: (context) => FloatingActionButton(
      child: Icon(Icons.add),
      onPressed: () { showModalBottomSheet(
          context: context,
          builder: (context) {
            return Text('Modal bottom sheet', style: TextStyle(fontSize: 30));
          });
      }
  ),
),

score 0 · Answer 4 · answered May 11 '21 at 18:28

0

to add to this, there are cases where the generated test case is not updated to match your current main class

answered May 11 '21 at 18:28

elfin

11
1
7

No MediaQuery ancestor could be found?

4 Answers4

Linked