在 flutter 中使用 MediaQuery 的高度和宽度大小时出错

Question

I was writing a code for my flutter application. In that I needed to get size of screen of mobile so I used Media Query but error occurred saying "MediaQuery was called with no context" but I was passing the context. Here is the code

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    double height = MediaQuery.of(context).size.height;
    double width = MediaQuery.of(context).size.width;

    return MaterialApp(
      title: 'Text',
      home: Scaffold(
        body: Container(
          height: height,
          width: width,
        ),
      ),
    );
  }
}

How can I solve this error. Please help. Thanks in advance.

Answer 1

You can't do the MediaQuery.of(context) call in the MaterialApp create Methode, because the app does not know anything about the Media. The error message is

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

You can use this call after the app is running but not in the start up sequence.

Maybe you create an extra widget underneath the MaterialApp. Then it would work.

Answer 2

It should be working by the way anyways run flutter clean from cmd or your console and then try running the app.

If it is not working then directly give the height and the width of the scaffold , MediaQuery.of(context).size.height, and MediaQuery.of(context).size.width, respectively and some modifications like this:

    import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(

        title: Text('text'),
      ),
      body: Container(
        color:Colors.red, //Only to se if the container is being displayed.
        height: MediaQuery.of(context).size.height,
        width: MediaQuery.of(context).size.width,
      ),
    );
  }
}

This would definitely work. if you still face any difficulties then you can ask in the comments.