Responsive Layouts: Mit Flutter von der Mobile-App zur Web-App
Das von Google entwickelte SDK Flutter und ein paar Tricks erleichtern das Entwickeln von Anwendungen sowohl für Desktop- als auch für Mobile-Geräte.
(Bild: Prostock-studio/Shutterstock.com)
- Thomas Schwarzott
Flutter erfreut sich als Software Development Kit (SDK) zur Entwicklung von Cross-Plattform-Mobile-Apps zunehmender Beliebtheit, da es Anbietern von Apps ermöglicht, mit einer Codebasis die beiden großen Zielplattformen Android und iOS zu bedienen.
Im März 2021 veröffentlichte Google Version 2.0 des auf mobile Endgeräte ausgelegten Frameworks. Zur gleichen Zeit konnten Flutter-Entwicklerinnen und -Entwickler das wahrscheinlich wichtigste neue Feature in der als stabil geltenden Version testen: Flutter Web. Damit lassen sich Webanwendungen mit Flutter und Dart erstellen, einer ebenfalls von Google entwickelten Programmiersprache, die auf Cliententwicklung für Webanwendungen und mobile Clients ausgelegt ist. Für Letztere kommt das Cross-Plattform-Framework Flutter ins Spiel.
Von der Mobile-App zur responsiven Web-App
Die mobilen Ansichten responsiver Webseiten orientieren sich heute vor allem an User-Interface-(UI)-Patterns von Mobile-Anwendungen, etwa Drawer-Navigation. Wie sehr sich Website und App ähneln, zeigt beispielsweise die Website zum Sportmagazin kicker (s. Abb. 1). Der Haupt-Content behält bei beiden Ansichten die Reihenfolge bei: Bild, Headline und Text. Die Navigation ist über einen Icon-Button in der Header-Bar erreichbar, gleitet in Browser und App von links als Overlay in den Viewport und weist eine beinahe identische hierarchische Gliederung auf.
(Bild: kicker.de)
Im Web herrschte lange "Gewaltenteilung": HTML für die Struktur, CSS für das Styling und JavaScript für Logik und Kontrollfluss. In deklarativen Frameworks wie Flutter und React verschwimmen die Grenzen – Komponenten werden ineinander verschachtelt und erhalten Callbacks und Styling-Angaben als Parameter. Dabei ist es umso wichtiger, mit ausgelagerten Klassen und Services zu arbeiten, um Übersichtlichkeit und Wartbarkeit des Codes aufrechtzuerhalten. Grundsätzlich hilft in diesem Fall eine saubere und disziplinierte objektorientierte Programmierung. In der Praxis jedoch lässt sich Spaghetti-Code an der einen oder anderen Stelle aufgrund von komplexen Logik- und UI-Strukturen, Sonderfällen und vielen Abhängigkeiten häufig nur durch eine sehr elaborierte Projektarchitektur vermeiden.
Nach der ersten Euphorie befällt Entwicklerinnen und Entwickler daher schnell die Sorge, ob "die eine" Codebasis für drei verschiedene Plattformen wirklich eine gute Idee ist – oder ob sie die entwicklungstechnische Büchse der Pandora öffnen. Üblicherweise klären sich solche Fragen am besten mit Praxistests.
Flutter in der Praxis
Wie entstehen responsive Ansichten? Während Smartphones – abgesehen von Gaming-Apps – vorwiegend hochkant bedient werden, haben Browserfenster auf dem Desktop tendenziell eher Querformat und sind wesentlich größer. In den ersten Jahren der Verbreitung responsiver Websites wurden sie daher oft via CSS-MediaQueries so erweitert, dass mehrspaltige Elemente zum Umbruch gezwungen waren. Zeilen wurden zu Spalten. Bei vielen optisch vollen Websites mit komplexen UI-Konstrukten führt das zu Herausforderungen für Entwickler.
Mit den Jahren verbreitete sich zunehmend der Mobile-First-Ansatz: Websites werden zunächst für Smartphone-Größen gestaltet und dann zur Desktopgröße hochskaliert. Wenn auch in der Entwicklung diese Reihenfolge eingehalten wird, ist das Ergebnis in der Regel eine saubere, weniger Bug-anfällige Codebasis und nebenbei meist auch eine optisch deutlich aufgeräumtere Website. Die verwendete Technologie – MediaQueries – bleibt hierbei die gleiche.
Die Online-Konferenz betterCode() Flutter gibt Software-, Web- und App-Entwicklern einen Einblick in die Möglichkeiten des Cross-Plattform-Werkzeugs Flutter. Die von heise Developer und dpunkt.verlag organisierte Veranstaltung findet am 24. Mai 2022 ganztägig statt. Das Event richtet sich an Interessierte, die sich tiefergehend mit Flutter auseinandersetzen möchten. Informationen und Tickets gibt es über die Konferenz-Webseite.
Responsive Flutter
Wie lässt sich nun responsives Layout für alle denkbaren Bildschirmgrößen umsetzen? Flutter stellt dafür diverse Widgets und Klassen bereit, zum Beispiel die LayoutBuilder- oder MediaQuery-Klassen.
Wichtig für beide Ansätze: Wird der Viewport der Anwendung in seiner Größe verändert, führt Flutter automatisch die build-Funktion aus und triggert so ein neues Rendering. Es ist kein eigener Event Listener für das Resizing des Viewports notwendig.
Damit das Layout sauber auf die gegebenen Größenparameter reagiert, müssen die Inhaltskomponenten in den richtigen Widgets verschachtelt sein. Dazu gilt es zunächst die Navigation zu betrachten. Der Einfachheit halber wird in diesem Beispiel nur eine Ebene implementiert.
