Flutter: Bildschirmabhängige Skalierung mit MediaQuery

Flutter MediaQuery – bildschirmabhängige Skalierung

MediaQuery ist ein leistungsfähiges Werkzeug in Flutter, das detaillierte Informationen über den Bildschirm des Geräts liefert. Mit Angaben zu Größe, Pixeldichte, Ausrichtung und mehr erstellen Sie responsive Layouts.

Was ist MediaQuery?

MediaQuery ist eine Klasse, auf die über den BuildContext zugegriffen wird und die die Medieneigenschaften des Geräts bereitstellt. Sie liefert unter anderem Bildschirmbreite, -höhe, Pixeldichte und den sicheren Bereich.

Grundlegende Verwendung

Widget build(BuildContext context) {
  final mediaQuery = MediaQuery.of(context);
  final screenWidth = mediaQuery.size.width;
  final screenHeight = mediaQuery.size.height;
  
  return Container(
    width: screenWidth * 0.8,   // 80% of screen
    height: screenHeight * 0.5, // 50% of screen
    color: Colors.blue,
    child: Center(
      child: Text('$screenWidth x $screenHeight'),
    ),
  );
}

Eigenschaften von MediaQuery

size (Bildschirmgröße)

final size = MediaQuery.of(context).size;
final width = size.width;    // Screen width (dp/logical pixels)
final height = size.height;  // Screen height (dp/logical pixels)

print('Screen: ${width}x${height}');

devicePixelRatio (Pixeldichte)

final pixelRatio = MediaQuery.of(context).devicePixelRatio;

// Physical pixel count
final physicalWidth = size.width * pixelRatio;
final physicalHeight = size.height * pixelRatio;

print('Pixel density: $pixelRatio');
print('Physical size: ${physicalWidth}x${physicalHeight}');

orientation (Ausrichtung)

final orientation = MediaQuery.of(context).orientation;

if (orientation == Orientation.portrait) {
  print('Portrait mode');
} else {
  print('Landscape mode');
}

Beispiele für anteilige Größen

Anteil der Breite

Widget build(BuildContext context) {
  final screenWidth = MediaQuery.of(context).size.width;
  
  return Container(
    width: screenWidth * 0.9,  // 90% of screen
    padding: EdgeInsets.all(16),
    child: Text('Content'),
  );
}

Anteil der Höhe

Widget build(BuildContext context) {
  final screenHeight = MediaQuery.of(context).size.height;
  
  return Container(
    height: screenHeight * 0.3,  // 30% of screen
    color: Colors.blue,
    child: Center(child: Text('Banner')),
  );
}

MediaQuery im Vergleich zu LayoutBuilder

MediaQuery

// Full screen information
final screenWidth = MediaQuery.of(context).size.width;

• Liefert die gesamte Bildschirmgröße des Geräts
• Von überall zugänglich
• Benötigt einen BuildContext

LayoutBuilder

// Parent widget's size
LayoutBuilder(
  builder: (context, constraints) {
    final localWidth = constraints.maxWidth;
    return Container(width: localWidth);
  },
)

• Liefert die Größe des übergeordneten Widgets
• Lokale Information im Widget-Baum
• Feinere Kontrolle

Wann nehmen Sie was?

• MediaQuery: Allgemeine Entscheidungen anhand von Bildschirmbreite und -höhe
• LayoutBuilder: Spezielle Größen anhand des übergeordneten Containers

Zusammenfassung

MediaQuery:

• Liefert die Bildschirmmaße (size.width, size.height)
• Liefert Informationen zum sicheren Bereich (padding)
• Erkennt den Zustand der Tastatur (viewInsets)
• Meldet die Ausrichtung (orientation)
• Liefert Informationen zum Theme (platformBrightness)
• Liefert die Pixeldichte (devicePixelRatio)

Tipps für anteiliges Design:

• Für die Breite: screenWidth * 0.x
• Für die Höhe: screenHeight * 0.x
• Übliche Anteile: 0.1 (10 %), 0.5 (50 %), 0.9 (90 %)
• Padding: 3–5 % des Bildschirms
• Schriftgröße: 4–6 % der Breite (für Überschriften)

MediaQuery ist der Grundstein für Anwendungen in Flutter, die sich an die Eigenschaften des Geräts anpassen!