Erreur de flottement: MediaQuery.of () appelé avec un contexte qui ne contient pas de MediaQuery

Question

J'ai essayé d'obtenir la taille de la vue contextuelle entière dans Flutter. Mais chaque fois que j'essaye, j'obtiens l'erreur mentionnée ci-dessus. Voici mon code:

 import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    final size = MediaQuery.of(context).size;
    return new MaterialApp(
      home: new Scaffold(),
    );
  }
}
 

Remarque: j'ai également essayé avec un StatefulWidget . S'il vous plaît, aidez-moi à trouver ce que je fais mal ici.

Answer 1

Vous avez besoin d'un MaterialApp ou d'un WidgetsApp autour de votre widget. Ils fournissent le MediaQuery . Lorsque vous appelez .of(context) flutter recherchera toujours l'arborescence des widgets pour trouver le widget.

Vous avez généralement ceci dans votre main.dart:

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

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Title',
      theme: kThemeData,
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;

    return Container(
      child: ...,
    );
  }
}
 

Answer 2

Vous pouvez accéder à MediaQuery lorsque vous êtes à l'intérieur de MaterialApp . L'endroit où vous accédez à la requête multimédia n'est pas correct.

Veuillez vous référer au code ci-dessous:

 import 'package:flutter/material.dart';

class CommonThings {
  static Size size;
}

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

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    CommonThings.size = MediaQuery.of(context).size;
    print('Width of the screen: ${CommonThings.size.width}');
    return new Container();
  }
}
 

J'ai délibérément créé une classe CommonThings qui a une taille statique afin que vous puissiez l'utiliser dans toute l'application.

Answer 3

Je l'ai corrigé en utilisant la méthode suivante. J'ai d'abord créé une nouvelle classe nommée MyWidget et je l'ai renvoyée en MyApp dans un MaterialApp %% home: . Référez-vous au code ci-dessous:

 import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    return new MaterialApp(
      home: new MyWidget(),
    );
  }
} 

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    final size = MediaQuery.of(context).size;
    return new MaterialApp(
      home: new Scaffold(),
    );
  }
} 
 

De plus, déclarer la taille comme finale n'a pas d'importance. L'orientation / rotation est gérée.

Answer 4

Résolu en réexécutant l'application (cliquez sur le bouton d'arrêt dans le studio Android, puis exécutez à nouveau)

Answer 5

Enveloppez votre code dans un widget Material App. J'ai également eu le même problème car j'ai oublié de l'utiliser et j'ai directement retourné l'échafaudage.

En d'autres termes, votre MediaQuery.of (contexte) doit être à l'intérieur du widget matériel. Application de matériau -> échafaudage -> MediaQuery.of (contexte)