Flutter MediaQuery.of und Orientation

Wer ein Smartphone benutzt ist wahrscheinlich schon mit folgendem Effekt konfrontiert gewesen: Man dreht das Gerät in eine andere Lage und der Bildschirm passt sich dieser neuen "Orientierung" an. Diesen Effekt kann man auch in Flutter erzielen.

Zuerst sollte man aber wissen, wie trifft die Software die Entscheidung, in welchem Modus das Gerät sich befindet.

Die Information in welcher Lage sich das Smartphone sich befindet, kommt von dem Gerätesensor. Diese ist also für die Plattform (Android / iOS) verfügbar. Flutter hat diese Auswertung im SDK implementiert, wobei es noch eine Möglichkeit über einen Plattform Channel gäbe, an diese und weitere Informationen zu gelangen.
Die Entscheidung ob Portrait oder Landscape Modus wird dabei ganz einfach getroffen:

Breite > Höhe => Landschaftsmodus (Landscape)

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: OrientationDemo(title:"Orientation Demo"),
    );
  }
}

class OrientationDemo extends StatelessWidget {
  OrientationDemo({Key key, this.title}) : super(key: key);

  final String title;
  @override
  Widget build(BuildContext context) {
    
    var orientierungsVar = MediaQuery.of(context);

    return Scaffold(
      appBar: AppBar(title: Text("Demo"),),
      body: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              FlutterLogo(
                size: orientierungsVar.orientation == Orientation.portrait ? 300.0 : 100.0,
              ),
              Text(orientierungsVar.orientation.toString()),
            ],
          )
      ],
      ),
    );
  }
}

Wenn wir den Code oben betrachten ist das erste was auffällt:

var orientierungsVar = MediaQuery.of(context);

Mit diesem Code lesen wir das Widget MediaQuery aus. MediaQuery.of(context) retourniert uns aus dem nächst verfügbaren MediaQuery Objekt MediaQuery.data .

MediaQuery.data enthält diverse Informationen die wir uns zu nutze machen können. Wichtig ist zu wissen, das dieses Widget ein InheritedWidget erweitert. Das führt dazu, das jedesmal wenn sich MediaQuery.data ändert, wird das Widget, in welchem wir MediaQuery implementiert haben neu aufgebaut.
Damit ist klar, das wir über dieses Objekt ein Layout entwickeln können, das sich am jeweils aktiven Modus (Portrait / Landscape) orientiert.

orientierungsVar.orientation == Orientation.portrait ? 300.0 : 100.0,

Dieser Code oben ist an sich eine kurze Schreibweise eines IF Konstrukts. Wir fragen mit
orientierungsVar.orientation == Orientation.portrait ab, ob das entsprechende Feld des MediaQuery.data Objekts identisch ist mit der enum Konstante Orientation.portrait. Wenn wahr,  wird der Wert 300.0 verwendet. Wenn falsch, dann der Wert nach dem Doppelpunkt, also 100.0 .

Ansonsten enthält der Code nichts ungewöhnliches. In einer Row zentrieren wir eine Column, welches ein FlutterLogo Widget enthält. Der aktive Modus wird benutzt um die Grösse des Flutter Logos zu bestimmen.

Zum Abschluss noch eine Bemerkung: Sowohl beim Emulator, wie bei realer Hardware kann es nötig sein, das Gerät so ein zu stellen, das es den Modus aktiv wechselt!