MediaQuery — was es ist, Funktionsprinzip und responsive Layouts

Was ist MediaQuery

MediaQuery ist ein Widget und eine Klasse in Flutter, die Daten über die Medienumgebung der Anwendung bereitstellt. MediaQuery umschließt die gesamte Anwendung im root MaterialApp- oder CupertinoApp-Widget, und jedes untergeordnete Widget kann über MediaQuery.of(context) auf diese Daten zugreifen.

Wenn Flutter eine Anwendung startet, erstellt es eine Instanz von MediaQueryData, die alle Metriken des aktuellen Geräts enthält. Diese Daten werden bei Änderungen automatisch aktualisiert: Gerätedrehung, Fenstergrößenänderung (auf dem Desktop), Erscheinen der Tastatur oder Änderungen der Systemzugänglichkeitseinstellungen. MediaQuery baut den Widget-Unterbaum bei jeder Datenänderung neu auf und sorgt so für eine reaktive Anpassung der Oberfläche.

MediaQueryData umfasst: size (Bildschirmgröße), devicePixelRatio (Pixeldichte), textScaleFactor (Schriftskalierung aus Systemeinstellungen), viewInsets (von der Tastatur abgedeckter Bereich), viewPadding (Systemabstände), orientation (Ausrichtung) und platformBrightness (helles oder dunkles Thema).

Zusammenfassung: MediaQuery ist die zentrale Quelle für Geräteinformationen in Flutter. Der Zugriff auf MediaQuery.of(context) ist der erste Schritt beim Aufbau jeder responsiven Oberfläche.

Wichtige Eigenschaften von MediaQueryData

MediaQueryData enthält Dutzende von Eigenschaften, aber die am häufigsten verwendeten sind diejenigen, die den Layoutaufbau beeinflussen. Schauen wir uns die wichtigsten an.

Size — Bildschirmgröße

MediaQuery.of(context).size gibt ein Size-Objekt mit der Bildschirmbreite und -höhe in geräteunabhängigen Pixeln (dip) zurück. Diese Werte berücksichtigen keine Systemabstände. Für responsive Layoutberechnungen ist size die primäre Metrik: sie bestimmt Breakpoints für mobile, Tablet- und Desktop-Layouts.

ViewPadding — Systemabstände

ViewPadding sind die Abstände, die das System für die Statusleiste, den Notch (Bildschirmausschnitt), das Systemnavigationspanel und den Home-Indikator (auf iOS) reserviert. Ohne Berücksichtigung dieser Abstände kann Inhalt unter Systemelementen erscheinen. MediaQuery.of(context).padding gibt ein EdgeInsets zurück, das als Padding auf den root-Container der Seite angewendet werden sollte.

ViewInsets — Tastaturbereich

ViewInsets ist der Bildschirmbereich, der von der Softwaretastatur abgedeckt wird. Für Eingabefelder ist es entscheidend, viewInsets.bottom zu überwachen, um den Inhalt über die Tastatur anzuheben. Flutter behandelt dies automatisch im Scaffold, aber für benutzerdefinierte Layouts müssen Sie MediaQuery.of(context).viewInsets direkt verwenden.

Orientation — Geräteausrichtung

Orientation — Hochformat (portrait) oder Querformat (landscape). Es wird durch Vergleich von Breite und Höhe bestimmt: wenn die Breite kleiner als die Höhe ist — portrait, andernfalls — landscape. Im Produktionscode wird die Ausrichtung verwendet, um zwischen vertikaler und horizontaler Elementanordnung umzuschalten.

Zusammenfassung: vier wichtige Eigenschaften — size, viewPadding, viewInsets und orientation — decken 90% der responsiven Gestaltungsaufgaben ab. Die restlichen Eigenschaften (textScaleFactor, platformBrightness, devicePixelRatio) werden für spezifische Szenarien verwendet.

MediaQuery für responsive Layouts verwenden

MediaQuery ist die Grundlage für responsives Design in Flutter. Darüber werden Breakpoints bestimmt, das Layout je nach Bildschirmgröße umgeschaltet und Abstände für verschiedene Geräte angepasst.

Typisches Szenario: eine mobile App muss eine Produktliste anzeigen. Auf dem Telefon (Breite < 600dp) — eine Spalte. Auf dem Tablet (Breite 600–900dp) — zwei Spalten. Auf dem Desktop (Breite > 900dp) — drei Spalten. MediaQuery.of(context).size.width ermöglicht die dynamische Auswahl der Spaltenanzahl ohne separaten Bildschirm für jeden Formfaktor.

Zweites Szenario: Berücksichtigung von System-Gesteinsets auf modernen Geräten. Auf iPhones mit Dynamic Island oder Android mit Gestennavigation verbrauchen Systemabstände einen Teil des Bildschirms. MediaQuery.of(context).padding gibt korrekte Werte für jeden Gerätetyp zurück, und Scaffold wendet sie automatisch über body an. Für benutzerdefinierte Widgets müssen Sie Padding explizit von MediaQuery übergeben.

Drittes Szenario: Anpassung an Systemzugänglichkeitseinstellungen. MediaQuery.of(context).textScaleFactor zeigt an, wie stark der Benutzer die Schriftgröße in den Einstellungen erhöht hat. Bei textScaleFactor > 1.3 kann das Layout brechen — lange Texte überschreiten Kartengrenzen. Responsive Layouts sollten dies berücksichtigen und bei Bedarf auf ein einfacheres Layout umschalten.

Zusammenfassung: MediaQuery ist nicht nur eine Quelle für Metriken, sondern ein Werkzeug zum Aufbau wirklich responsiver Oberflächen. Verwenden Sie es für Breakpoints, den sicheren Bereich und Zugänglichkeitsaspekte.

Codebeispiele mit MediaQuery

Beispiel 1 demonstriert das Abrufen der Bildschirmgröße und das Anwenden von Breakpoints zur Auswahl der Spaltenanzahl.

int getColumnCount(BuildContext context) {
  final width = MediaQuery.of(context).size.width;
  if (width > 900) return 3;
  if (width > 600) return 2;
  return 1;
}

Das obige Beispiel zeigt eine Funktion zur Auswahl der Spaltenanzahl basierend auf der Bildschirmbreite. Die Breakpoints 600 und 900 entsprechen den allgemein akzeptierten Material Design Standards für Telefone, Tablets und Desktop.

Beispiel 2 — Verwendung von MediaQuery mit viewPadding für korrekte Inhaltsplatzierung unter Berücksichtigung von Systemabständen.

Widget build(BuildContext context) {
  final padding = MediaQuery.of(context).padding;

  return Padding(
    padding: EdgeInsets.only(
      top: padding.top,
      left: padding.left,
      right: padding.right,
    ),
    child: const MyContent(),
  );
}

In diesem Beispiel umschließt padding den Inhalt in Padding unter Verwendung von Systemabständen. top berücksichtigt die Statusleiste und den Notch, left/right die sicheren Bereiche. bottom ist nicht enthalten, da Scaffold die untere Navigation normalerweise selbst behandelt.

Beispiel 3 — Bestimmung der Ausrichtung und Wechsel der Elementanordnung.

Widget build(BuildContext context) {
  final isPortrait = MediaQuery.of(context).orientation == Orientation.portrait;

  return isPortrait
      ? const Column(
          children: [HeaderBanner(), ContentList()],
        )
      : const Row(
          children: [HeaderBanner(), ContentList()],
        );
}

Im Hochformat sind Elemente vertikal angeordnet (Column); im Querformat horizontal (Row). Dieser Ansatz nutzt den Platz beim Drehen des Geräts optimal aus.

Zusammenfassung: MediaQuery ist das wichtigste Werkzeug zum Erstellen responsiver Layouts. Berücksichtigen Sie bei der Entwicklung von Flutter-Oberflächen immer Systemabstände, Breakpoints und die Ausrichtung.

Häufige Fehler bei der Arbeit mit MediaQuery

Fehler 1: Aufruf von MediaQuery.of(context) außerhalb eines Kontexts, in dem MediaQuery gesetzt ist. Wenn ein Widget im Baum über MediaQuery liegt, führt der Aufruf zu einem Laufzeitfehler. Lösung: Rufen Sie MediaQuery.of(context) immer innerhalb von Widgets auf, die von MaterialApp oder CupertinoApp umschlossen sind, wo MediaQuery als root-Widget gesetzt ist.

Fehler 2: Vergessen des sicheren Bereichs. Entwickler verwenden MediaQuery.size zum Positionieren von Elementen ohne Berücksichtigung von Systemabständen. Auf Geräten mit Notch oder Gestennavigation erscheint der Inhalt unter der Statusleiste. Lösung: Ziehen Sie MediaQuery.of(context).padding von den Positionierungskoordinaten ab.

Fehler 3: Starre Bindung an Größen. Die Verwendung von MediaQuery.of(context).size.width zum Festlegen exakter Elementgrößen (width: size.width * 0.3) funktioniert nur auf Geräten desselben Formfaktors. Auf Desktop oder Tablet wirkt das Layout unnatürlich. Lösung: Verwenden Sie Breakpoints in Kombination mit Expanded und Flexible für ein flexibles Layout, keine festen Prozentsätze.

Fehler 4: Ignorieren von textScaleFactor. Wenn der Benutzer die Systemschrift vergrößert, kann die Oberfläche brechen — Texte überschreiten Containergrenzen. Lösung: Überprüfen Sie MediaQuery.of(context).textScaleFactor und schalten Sie bei Werten über 1.3 auf ein einfacheres Layout mit Scrollen um.

Zusammenfassung: MediaQuery ist ein leistungsstarkes, aber feines Werkzeug. Berücksichtigen Sie Systemabstände, Ausrichtung und Zugänglichkeitseinstellungen, damit die Oberfläche auf allen Geräten korrekt aussieht.