Flutter

Was ist Flutter?

Flutter ist Googles quelloffenes UI-Toolkit, um Apps für Mobilgeräte, Web und Desktop aus einer einzigen Codebasis in der Sprache Dart zu bauen. Statt die nativen Steuerelemente des Systems einzubinden, zeichnet Flutter seine Oberfläche mit einer eigenen Rendering-Engine selbst, und alles, was Sie sehen, besteht aus Widgets. Ein einziges Projekt kann Android, iOS, Windows, macOS, Linux und das Web ansprechen.

So funktioniert Flutter

Dart und Kompilierung

In der Entwicklung laufen Flutter-Apps in einer VM, die Stateful Hot Reload ermöglicht: Sie ändern den Code und sehen das Ergebnis ohne vollständige Neukompilierung. Für Release-Builds kompiliert Flutter Dart direkt zu Maschinencode (Intel x64 oder ARM). Im Web wird Dart stattdessen zu JavaScript oder WebAssembly kompiliert. Die aktuelle Liste der unterstützten Plattformen und Betriebssystemversionen steht auf der Seite der unterstützten Plattformen von Flutter und ändert sich mit den Versionen.

Widgets

Ein Widget ist eine unveränderliche Beschreibung eines Teils der Benutzeroberfläche. Kleine Widgets setzen Sie zu einem Baum zusammen: Ein Button steht in einer Spalte, diese in einem Scaffold, dieses in der App. Ändert sich der Zustand, baut Flutter die betroffenen Widgets neu auf, der Bildschirm ist also eine Funktion Ihres Zustands. Flutter hat für jedes UI-Element eine eigene Implementierung und nutzt nicht die des Systems.

Rendering mit Impeller

Die Flutter-Engine, größtenteils in C++ geschrieben, rastert jedes Frame. Impeller ist ihr Renderer und kompiliert Shader beim Bau der Engine, sodass sie nicht während der Laufzeit der App kompiliert werden. Laut der Flutter-Dokumentation für Version 3.47 ist Impeller auf iOS der einzige unterstützte Renderer, auf Android ab API 29 standardmäßig aktiv (ältere Geräte fallen auf OpenGL zurück) und auf macOS, Linux und Windows standardmäßig aktiv. Flutter im Web nutzt weiterhin Skia.

Beispiel

Ein Lieferdienst-Team baut eine App. Die Restaurantliste ist eine ListView aus Karten-Widgets, gespeist von einem REST-Endpunkt. Ein Tipp auf eine Karte öffnet den Detailbildschirm. Derselbe Dart-Code geht in den App Store, bei Google Play und in einen Web-Build, und plattformspezifische Teile wie Push-Benachrichtigungen laufen über Plugins.

Häufige Fehler

• Nur auf einem schnellen Emulator oder einem Flaggschiff-Handy testen. Ruckler zeigen sich auf älterer Hardware, testen Sie also auf einem schwachen Gerät.
• Große Widget-Teilbäume bei jeder Zustandsänderung neu aufbauen. Halten Sie den Zustand nah an den Widgets, die ihn nutzen.
• Das Backend von vielen Bildschirmen aus ohne Caching oder Paginierung aufrufen, sodass jede Navigation langsame Anfragen auslöst. Siehe API-Paginierung.
• "Eine Codebasis" mit "keine Plattformarbeit" gleichsetzen. Berechtigungen, Store-Regeln, Push-Benachrichtigungen und Web-Verhalten unterscheiden sich weiterhin je Plattform.

Flutter, Lasttests und Monitoring

Wie flüssig Flutter auf dem Bildschirm läuft, ist Sache des Clients und lässt sich mit Flutters eigenen Profiling-Werkzeugen auf echten Geräten prüfen. Worauf die App meist wartet, ist das Backend. Jeder Bildschirm, der Daten lädt, ruft einen API-Endpunkt auf, und hohe Latenz dort wirkt wie eine langsame App. LoadFocus profiliert nicht die Flutter-Oberfläche, kann aber die Dienste dahinter testen. Mit einem Lasttest sehen Sie, wie sich diese Endpunkte verhalten, wenn viele Nutzer gleichzeitig die App öffnen, und mit dem API-Monitoring prüfen Sie sie rund um die Uhr und werden alarmiert, wenn einer ausfällt oder langsamer wird. Zwei praktische Lesetipps: App-Ladezeiten mit Cloud-Lasttests messen und Mobile-API-Performance optimieren. Wenn Sie Toolkits vergleichen, sehen Sie sich React Native und Expo an.

Häufige Fragen (FAQ)

Welche Sprache nutzt Flutter?

Flutter nutzt Dart. Dart ist objektorientiert, und Flutter-Apps werden für Release-Builds zu nativem Maschinencode kompiliert, für das Web zu JavaScript oder WebAssembly.

Welche Plattformen unterstützt Flutter?

Android, iOS, Windows, macOS, Linux und das Web. Unterstützte Betriebssystemversionen und Browser ändern sich mit jeder Version, prüfen Sie also die Seite der unterstützten Plattformen in der Flutter-Dokumentation.

Ist Flutter dasselbe wie React Native?

Nein. Beide bauen plattformübergreifende Apps, aber Flutter zeichnet die Oberfläche mit eigener Engine und nutzt Dart, während React Native JavaScript nutzt und über native UI-Komponenten rendert.

Wie teste ich das Backend einer Flutter-App?

Das Backend ist eine normale HTTP-API, Sie können seine Endpunkte also mit denselben Werkzeugen per Lasttest prüfen und überwachen wie für jeden anderen Client. Achten Sie auf Antwortzeit und Fehlerrate, nicht nur darauf, dass die App startet.