Ich habe versucht, die Größe der gesamten Kontextansicht in Flutter zu ermitteln. Aber jedes Mal, wenn ich es versuche, erhalte ich den oben genannten Fehler. Hier ist mein 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(),
);
}
}
Hinweis: Ich habe es auch mit einem versucht StatefulWidget
. Bitte helfen Sie mir herauszufinden, was ich hier falsch mache.
Antworten:
Sie benötigen ein
MaterialApp
oder einWidgetsApp
um Ihr Widget. Sie bieten dieMediaQuery
. Wenn Sie.of(context)
Flutter aufrufen, wird immer der Widget-Baum nachgeschlagen, um das Widget zu finden.Normalerweise haben Sie dies in Ihrem 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: ..., ); } }
quelle
Sie können zugreifen,
MediaQuery
wenn Sie drinnen sindMaterialApp
. Der Ort, an dem Sie auf die Medienabfrage zugreifen, ist nicht korrekt.Bitte beziehen Sie sich auf den folgenden Code:
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(); } }
Ich habe absichtlich eine Klasse
CommonThings
mit statischer Größe erstellt, damit Sie sie in der gesamten App verwenden können.quelle
Ich habe es mit der folgenden Methode behoben. Zuerst habe ich eine neue Klasse mit dem Namen erstellt
MyWidget
und sieMyApp
innerhalb von aMaterialApp
's zurückgegebenhome:
. Siehe Code unten: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(), ); } }
Außerdem spielt es keine Rolle, die Größe als endgültig zu deklarieren. Orientierung / Drehung wird behandelt.
quelle
Gelöst durch erneutes Ausführen der App (klicken Sie in Android Studio auf die Schaltfläche Stopp und dann erneut ausführen)
quelle
Was für uns funktioniert, ist die Verwendung von WidgetsBinding.instance.window anstelle von MediaQuery - auch beim Festlegen des Themas der MaterialApp:
_pixelRatio = WidgetsBinding.instance.window.devicePixelRatio; _screenWidth = WidgetsBinding.instance.window.physicalSize.width; _screenHeight = WidgetsBinding.instance.window.physicalSize.height; _statusBarHeight = WidgetsBinding.instance.window.padding.top; _bottomBarHeight = WidgetsBinding.instance.window.padding.bottom; _textScaleFactor = WidgetsBinding.instance.window.textScaleFactor;
quelle
WidgetsBinding.instance.window.padding.top
undMediaQuery.of(context).padding.top;
Es gibt einen besseren Weg . Bei den oben genannten Lösungen müssen Sie nur ein Bildschirm-Widget haben oder alle Bildschirme von der übergeordneten Klasse erben . Es gibt jedoch eine Lösung : Platzieren Sie die Initialisierung der Medienabfrage in der Rückruffunktion onGenerateRoute
main.dart
import 'package:flutter/material.dart'; class MyApp extends StatefulWidget { @override State<StatefulWidget> createState() => new MyAppState(); } class MyAppState extends State<MyApp> { @override Widget build(BuildContext context) { return MaterialApp( title: 'My Awesome App', routes: NavigationUtils.routeList(), onGenerateRoute: (routeSettings) => NavigationUtils.onGenerateRoute(routeSettings), ); } }
NavigationUtils.dart
import 'package:flutter/material.dart'; class NavigationUtils { static onGenerateRoute(RouteSettings routeSettings) { return new MaterialPageRoute( builder: (context) { WidgetUtils.me.init(context); return StorageUtils.me.isLogged() ? HomeScreen() : ForkScreen(); }, settings: routeSettings, ); } }
WidgetUtils.dart
import 'package:flutter/material.dart'; class WidgetUtils { MediaQueryData _mediaQueryData; double _screenWidth; double _screenHeight; double _blockSizeHorizontal; double _blockSizeVertical; init(BuildContext context) { _mediaQueryData = MediaQuery.of(context); screenWidth = _mediaQueryData.size.width; screenHeight = _mediaQueryData.size.height; blockSizeHorizontal = screenWidth / 100; blockSizeVertical = screenHeight / 100; } }
Warnung: Es ist kein Code zum Kopieren und Einfügen, es gibt einige Singletons usw., aber Sie sollten den Punkt verstehen;)
quelle
Hatte den gleichen Fehler in
import 'screens/tasks_screen.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return TasksScreen(); } }
Ich habe es gelöst durch: -
import 'package:flutter/material.dart'; import 'screens/tasks_screen.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: TasksScreen(), ); } }
quelle
Wickeln Sie Ihren Code in ein Material App-Widget. Ich hatte auch das gleiche Problem, als ich vergaß, es zu benutzen, und gab das Gerüst direkt zurück.
Mit anderen Worten, Ihre MediaQuery.of (Kontext) sollte sich im Material Widget befinden. Material App -> Gerüst -> MediaQuery.of (Kontext)
quelle
void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: MyAppOne(), ); } } class MyAppOne extends StatefulWidget { @override _MyAppState createState() => _MyAppState(); } class _MyAppState extends State<MyAppOne>{ @override Widget build(BuildContext context){ return Scaffold( ); } }
quelle
Mit anderen Worten, Ihre MediaQuery.of (Kontext) sollte sich im Material Widget befinden. Material App -> Gerüst -> MediaQuery.of (Kontext)
quelle
MediaQuery
wird vonScaffold
internen Komponenten verwendet, um die untergeordneten Elemente so zu gestalten, wie dies aus dem Quellcode hervorgeht . So muss es in einem Widget gewickelt werden , die ein liefern wirdMediaQuery
, wie einMaterialApp
Widget, das von erbtWidgetsApp
.Um Ihre MediaQuery.of (Kontext) zu reparieren, sollte sich im Material Widget befinden. Material App -> Gerüst -> MediaQuery.of (Kontext)
class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Loading Page', theme: ThemeData( primarySwatch: Colors.blue, ), home: MyAppPage(), ); } }
Weitere Informationen : MediaQuery.of () wird mit einem Kontext aufgerufen, der keine MediaQuery enthält
quelle
Ich habe versucht, das Paket zu ändern, dann tritt dieser Fehler auf. Führen Sie daher die folgenden Schritte aus
https://stackoverflow.com/a/51550358/4993045
quelle
import 'package:flutter/material.dart'; void main() => runApp(App()); class App extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body:HomePage(), ), ); } } class HomePage extends StatelessWidget { @override Widget build(BuildContext context) { var size = MediaQuery.of(context).size.height; return Container( height:size/2, color:Colors.lightBlueAccent, ); } }
Sie sollten versuchen, dass ich es getan habe.
quelle
MaterialApp hinzufügen ...
void main() { runApp(MaterialApp( home: HomePage(), )); }
quelle