Ist deine Flutter-App bereit für das iPhone Duo?

Das iPhone Duo, Apples erstes faltbares iPhone, kam am 23. Oktober auf den Markt. Damit stellen sich für uns App-Entwickler viele Fragen: Welche Auswirkungen hat es auf die Entwicklung? Müssen wir unsere Apps an dieses neue faltbare Format anpassen? Und wenn ja, welche Schwierigkeiten bringt das mit sich? Was passiert, wenn wir sie nicht anpassen? Wie sehen sie aus, wenn das Gerät gefaltet oder aufgeklappt ist? Welche Werkzeuge bietet Flutter, um die Benutzeroberfläche anzupassen?

In diesem Artikel möchte ich all diese Fragen schnell beantworten, damit du weißt, was auf dich zukommt, wenn du Apps für iOS vertreibst. Am Ende zeige ich dir außerdem eine sehr einfache Möglichkeit, die Benutzeroberfläche deiner App mit wenig Aufwand so anzupassen, dass sie auf dem neuen iPhone Duo gut aussieht.

Das iPhone Duo verändert, wie deine App dargestellt wird

Damit wir genau verstehen können, was beim Ausführen einer App auf dem iPhone Duo passiert, habe ich diese äußerst einfache Beispiel-App vorbereitet. Sie zeigt lediglich eine Liste mit Notizen an. Wenn wir auf eine davon tippen, gelangen wir zu einem Bildschirm, auf dem wir den Inhalt der Notiz sehen können:

Sehen wir uns nun an, was passiert, wenn ich dieselbe App auf einem iPhone Duo ausführe. Zuerst zeige ich dir, wie sie aussieht, wenn sie mit dem iOS 27.1 SDK kompiliert wurde, ohne weitere Anpassungen an der Benutzeroberfläche vorzunehmen:

Wie du siehst, wird die App so skaliert, dass sie den gesamten verfügbaren Platz einnimmt. Bei gefaltetem Gerät ist das kein großes Problem, da die Abmessungen und das Seitenverhältnis des äußeren Displays denen eines herkömmlichen iPhones relativ ähnlich sind. Sobald der Nutzer es jedoch aufklappt, verteilt sich eine für ein schmales Smartphone-Fenster entworfene Benutzeroberfläche über die gesamte Breite des inneren Displays. Sie funktioniert, bietet aber nicht das beste Erlebnis.

Flutter an das iPhone Duo anpassen

Zum Glück bietet Flutter zahlreiche Widgets und Werkzeuge, mit denen sich die Benutzeroberfläche nicht nur an das iPhone Duo, sondern an jede Fenstergröße anpassen lässt. Meiner Meinung nach lautet die richtige Denkweise nicht „Ich passe meine Flutter-App an das iPhone Duo an“, sondern vielmehr „Ich passe meine Flutter-App an neue Größen an“. Es geht darum, uns vom physischen Gerät zu lösen und eine responsive Benutzeroberfläche zu entwickeln, die dynamisch auf den verfügbaren Platz reagiert.

Mit nur wenigen Anpassungen könnten wir zum Beispiel eine solche Lösung umsetzen:

Wie du siehst, behalte ich beim gefalteten Duo das bisherige Layout bei. Beim Aufklappen nutze ich die zusätzliche Breite des inneren Displays, um die Liste der Notizen links und die Details der ausgewählten Notiz rechts anzuzeigen.

Dieser Effekt lässt sich einfach mit LayoutBuilder erreichen. Dieses Widget stellt uns die Größenbeschränkungen zur Verfügung, die es von seinem übergeordneten Widget erhält. Wenn sich diese Beschränkungen ändern, zum Beispiel bei einer Änderung der Geräteausrichtung oder beim Falten beziehungsweise Aufklappen des iPhone Duo, führt Flutter seinen builder erneut aus. Dadurch können wir abhängig vom verfügbaren Platz die passende Benutzeroberfläche auswählen:

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: const Text('Notes')),
    body: SafeArea(
      top: false,
      child: LayoutBuilder(
        builder: (context, constraints) {
          if (constraints.maxWidth >= _wideLayoutWidth) {
            return _WideNotesLayout(
              notes: _notes,
              selectedIndex: _selectedNoteIndex,
              onSelected: _selectNote,
            );
          }

          return _NotesList(notes: _notes, onSelected: _openNote);
        },
      ),
    ),
  );
}

Neben LayoutBuilder verwende ich in diesem Beispiel SafeArea, damit Inhalte außerhalb der von der Systemoberfläche, der Kamera und den abgerundeten Ecken belegten Bereiche bleiben. Flutter bietet viele weitere Werkzeuge zum Erstellen anpassungsfähiger Benutzeroberflächen: Mit MediaQuery.sizeOf() lässt sich die aktuelle Größe des App-Fensters abfragen, Expanded und Flexible verteilen den Platz innerhalb von Zeilen und Spalten, und mit ConstrainedBox lassen sich Mindest- oder Höchstgrenzen festlegen, damit sich Inhalte nicht zu stark ausdehnen. Und das sind nur einige Beispiele. Flutter bietet noch viele weitere Werkzeuge, um eine Benutzeroberfläche an den verfügbaren Platz anzupassen.

Muss ich meine App an das iPhone Duo anpassen? Lohnt sich das?

Bevor wir darauf eingehen, ob es sich lohnt, deine App an das iPhone Duo anzupassen, oder wie umfangreich diese Anpassung sein sollte, sehen wir uns zunächst die von Apple angekündigte Anforderung an, die du beachten musst:

Diese Anforderungen verpflichten dich nicht ausdrücklich dazu, eine spezielle Benutzeroberfläche für das iPhone Duo zu erstellen. Dass Apple eigene Screenshots für das Gerät verlangt, deutet jedoch darauf hin, dass wir prüfen sollen, wie sich unsere Apps darauf verhalten, und zumindest die offensichtlichsten Anpassungsprobleme beheben sollen.

Wie viel Aufwand lohnt sich also für diese Anpassung? Die Antwort hängt stark von der Art der App und den Erwartungen ihrer Nutzer ab. In meinem Fall werden meine Apps hauptsächlich auf Smartphones verwendet, und Tablets machen nur einen winzigen Anteil meiner Nutzer aus. Es ist daher vernünftig anzunehmen, dass ich auch nicht viele Nutzer mit einem iPhone Duo haben werde. Deshalb werde ich wahrscheinlich nur die nötigen Mindestanpassungen vornehmen, damit meine Apps darauf einwandfrei funktionieren und die neue Anforderung für gerätespezifische Screenshots erfüllen.

Trotzdem würde ich den Aufwand nicht ausschließlich danach bemessen, wie viele Nutzer ein iPhone Duo besitzen werden. Wenn deine App bereits über eine flexible Benutzeroberfläche verfügt, kann ein vernünftiges Ergebnis nur sehr wenige Änderungen erfordern. Ist das nicht der Fall, kann dir die Anpassung an das Duo dabei helfen, Probleme zu erkennen, die auch auf Tablets, in größenveränderbaren Fenstern oder bei zukünftigen Formfaktoren auftreten werden. In diesem Sinne kann die Arbeit einen Nutzen bieten, der über dieses Gerät hinausgeht.

Fazit

Das iPhone Duo ist Apples neues Spielzeug und gibt uns einen weiteren Grund zu überprüfen, wie sich unsere Apps verhalten, wenn ihnen deutlich mehr Platz zur Verfügung steht. Wie bereits erwähnt, empfehle ich dir, nicht mit dem Gedanken „Ich passe meine App an das iPhone Duo an“ heranzugehen, sondern mit „Ich passe meine App an verschiedene Fenstergrößen an“. So kommt die Arbeit nicht nur diesem Gerät zugute, sondern auch Tablets und anderen aktuellen oder zukünftigen Formfaktoren.

Bis zum nächsten Mal!