Ein mittelständischer Händler möchte seinen Kundinnen und Kunden eine App anbieten: Bestellstatus, digitale Kundenkarte, Push-Nachrichten bei Angeboten. Die erste Frage im Projekt ist fast immer dieselbe: Zwei Apps bauen, eine für iPhone und eine für Android, oder eine gemeinsame Codebasis für beide? Cross-Plattform-Frameworks versprechen Letzteres, und Flutter ist eines der bekanntesten.

Google stellte Flutter Ende 2018 in der ersten stabilen Version vor. Seitdem ist aus dem Mobile-Framework ein Werkzeug geworden, das neben iOS und Android auch Web, Windows, macOS und Linux bedient. Ob Flutter tatsächlich „die Zukunft“ der App-Entwicklung ist, lässt sich nicht pauschal beantworten. Klar ist aber, wofür es sich eignet und wo seine Grenzen liegen.

Wie Flutter funktioniert

Die meisten Cross-Plattform-Ansätze greifen auf die Bedienelemente des jeweiligen Betriebssystems zurück: Ein Knopf in React Native wird auf dem iPhone zu einem iOS-Knopf, auf Android zu einem Android-Knopf. Flutter geht einen anderen Weg. Es zeichnet jedes Pixel der Oberfläche selbst, mit einer eigenen Grafik-Engine. Das Betriebssystem stellt im Grunde nur eine leere Fläche zur Verfügung.

Das hat zwei Folgen. Erstens sieht eine Flutter-App auf allen Geräten gleich aus, was Gestaltung und Tests vereinfacht. Zweitens muss Flutter das Aussehen und Verhalten der Plattformen nachbilden, wenn eine App sich „nativ“ anfühlen soll. Für Android liefert Flutter Bausteine im Material-Design von Google, für iOS die Cupertino-Bausteine im Apple-Stil.

Die Grafik-Engine heißt in aktuellen Versionen Impeller. Sie hat das ältere Skia-Rendering auf iOS, auf neueren Android-Geräten und seit Flutter 3.47 auch unter Windows, macOS und Linux als Standard abgelöst; im Web rendert Flutter weiterhin mit Skia. Ziel war vor allem, kurze Ruckler bei der ersten Ausführung von Animationen zu vermeiden, ein lange kritisierter Schwachpunkt.

Dart: die Sprache hinter Flutter

Flutter-Apps werden in Dart geschrieben, einer ebenfalls von Google entwickelten Programmiersprache. Wer Java, C#, Kotlin oder TypeScript kennt, findet sich schnell zurecht: Klassen, Typen, async/await für asynchrone Abläufe, eine vertraute Syntax.

Zwei Eigenschaften machen Dart für Flutter besonders passend:

• Zwei Arten der Übersetzung: Während der Entwicklung läuft Dart in einer virtuellen Maschine mit Just-in-time-Übersetzung, was schnelle Änderungen ermöglicht. Für die fertige App wird der Code vorab in Maschinencode für ARM- oder x64-Prozessoren übersetzt (Ahead-of-time). Das sorgt für kurze Startzeiten. Für das Web übersetzt Dart nach JavaScript oder nach WebAssembly.
• Null Safety: Seit Dart 3 ist die sogenannte „Sound Null Safety“ verpflichtend. Eine Variable kann nur dann leer (null) sein, wenn das ausdrücklich im Typ steht. Damit fällt eine der häufigsten Fehlerquellen in Apps weg, der Absturz durch einen unerwartet fehlenden Wert.

Dart 3 brachte außerdem Records, Pattern Matching und versiegelte Klassen, die vor allem bei der Verarbeitung von API-Antworten und Zuständen helfen. Mehr zur Sprache selbst und ihrem Einsatz in Teams bietet die Seite zu Dart mit Beratung, Coaching und Seminaren.

Widgets: Oberflächen als Baum

In Flutter besteht die gesamte Oberfläche aus Widgets. Ein Widget ist eine Beschreibung eines Teils der Oberfläche: ein Text, ein Knopf, ein Abstand, eine Spalte, ein ganzer Bildschirm. Widgets werden ineinander verschachtelt und bilden so einen Baum. Auch Layout-Aufgaben wie Zentrieren oder Polsterung sind Widgets.

import 'package:flutter/material.dart';

class Begruessung extends StatelessWidget {
  const Begruessung({super.key, required this.name});

  final String name;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16),
      child: Text(
        'Hallo, $name',
        style: Theme.of(context).textTheme.headlineSmall,
      ),
    );
  }
}

Das Beispiel zeigt ein eigenes Widget, das einen Namen mit Abstand und passender Schriftgröße ausgibt. Die Methode build beschreibt, wie das Widget aussieht. Flutter ruft sie bei Bedarf erneut auf und vergleicht das Ergebnis mit dem vorherigen Stand, um nur die geänderten Teile neu zu zeichnen. Das Schlüsselwort const erlaubt Flutter, unveränderliche Teile wiederzuverwenden, was Rechenzeit spart.

Stateless und Stateful: mit und ohne Zustand

Flutter unterscheidet zwei Grundtypen. Ein StatelessWidget hat keinen eigenen Zustand: Es zeigt an, was ihm übergeben wird, etwa ein Produktname auf einer Karte. Ein StatefulWidget hat einen veränderlichen Zustand, etwa ein Zähler, ein Formular oder ein ausklappbarer Bereich. Ändert sich der Zustand, wird das Widget neu gezeichnet.

import 'package:flutter/material.dart';

class Zaehler extends StatefulWidget {
  const Zaehler({super.key});

  @override
  State<Zaehler> createState() => _ZaehlerState();
}

class _ZaehlerState extends State<Zaehler> {
  int _klicks = 0;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: FilledButton(
        onPressed: () => setState(() => _klicks++),
        child: Text('Klicks: $_klicks'),
      ),
    );
  }
}

Der Aufruf setState teilt Flutter mit, dass sich etwas geändert hat. Für kleine Apps reicht das. In größeren Anwendungen verteilen Teams den Zustand mit Bibliotheken wie Provider, Riverpod oder Bloc, damit etwa der Warenkorb an mehreren Stellen der App aktuell bleibt.

Hot Reload: schneller Feedback-Kreislauf

Ein Grund, warum Entwicklerinnen und Entwickler Flutter schätzen, ist Hot Reload. Ändert man während der Entwicklung den Code, lädt Flutter die Änderung in die laufende App, ohne sie neu zu starten. Der aktuelle Zustand bleibt erhalten. Wer also gerade im dritten Schritt eines Bestellformulars ist und die Farbe eines Knopfes ändert, sieht die Änderung sofort an derselben Stelle.

In der Kommandozeile löst die Taste r einen Hot Reload aus, R einen Hot Restart, bei dem die App neu startet und den Zustand verliert. In Entwicklungsumgebungen wie Visual Studio Code oder Android Studio geschieht der Hot Reload je nach Einstellung beim Speichern. Grenzen gibt es bei grundlegenden Änderungen, etwa an der Struktur von Klassen oder an der Initialisierung der App; dann ist ein Neustart nötig.

Ein neues Projekt entsteht mit dem Befehl flutter create, der eine lauffähige Beispiel-App anlegt. Der Befehl flutter doctor prüft vorher, ob alle nötigen Werkzeuge installiert sind. Für iOS-Apps braucht man weiterhin einen Mac mit Xcode, denn Apple erlaubt das Bauen und Signieren nur dort.

Flutter im Vergleich: Wann es passt und wann nicht

Flutter ist nicht das einzige Cross-Plattform-Framework. Die wichtigsten Alternativen:

Für Flutter spricht ein eigenes, markengerechtes Design, das auf allen Geräten gleich aussehen soll, eine kleine Mannschaft, die mehrere Plattformen bedienen muss, und Apps mit vielen Formularen, Listen und Animationen. Auch für Bildschirme in Geräten und Fahrzeugen, sogenannte Embedded-Anwendungen, wird Flutter eingesetzt.

Gegen Flutter spricht eine starke Abhängigkeit von neuen Betriebssystemfunktionen am ersten Tag, etwa neuen Widgets für den Sperrbildschirm oder Funktionen der Smartwatch, die erst über Plugins nachgerüstet werden müssen. Auch das Web ist nur eingeschränkt das Revier von Flutter: Für interne Werkzeuge funktioniert es gut, für öffentliche Websites mit Suchmaschinenoptimierung und kurzen Ladezeiten sind klassische Webtechniken meist besser geeignet. Hinzu kommt die Bindung an Google als Hauptentwickler. Flutter ist Open Source, doch die Richtung bestimmt im Wesentlichen ein einzelnes Unternehmen. Berichte über Personalabbau im Flutter-Team und die Ankündigung eines Community-Forks namens Flock sorgten 2024 für Diskussionen, an der Weiterentwicklung durch Google hat sich bislang aber nichts Grundlegendes geändert.

Einen breiteren Überblick über die Ansätze gibt der Beitrag zu moderner Cross-Platform-Entwicklung. Wer tiefer in die Gestaltung von Oberflächen einsteigen möchte, findet im Beitrag über Layouts und Animationen in Flutter weitere Techniken.

Was das für Ihr Team bedeutet

Flutter ist ausgereift und für viele Geschäftsanwendungen eine solide Wahl. Unsere Einschätzung: Wer eine App für iOS und Android mit begrenztem Budget und eigenem Design braucht, sollte Flutter ernsthaft prüfen. Die Einsparung gegenüber zwei getrennten nativen Apps ist real, auch wenn sie kleiner ausfällt, als es Werbeversprechen nahelegen. Plattformspezifische Anpassungen, Tests auf echten Geräten und die Veröffentlichung in zwei App-Stores bleiben doppelte Arbeit.

Überschätzt wird oft die Idee „ein Code für alles“. Eine App, die auf dem Smartphone gut funktioniert, ist nicht automatisch eine gute Desktop- oder Webanwendung. Unterschätzt wird die Frage nach dem Team: Dart-Kenntnisse sind weniger verbreitet als JavaScript- oder Kotlin-Kenntnisse. Wer bereits ein starkes React-Team hat, ist mit React Native oft schneller am Ziel.

Für die Entscheidung helfen ein kleiner Prototyp mit den kritischsten Funktionen, etwa Kamera, Bluetooth oder Offline-Betrieb, und ein ehrlicher Blick auf die vorhandenen Fähigkeiten im Team. Bei der Planung, beim Aufbau von Know-how und bei technischen Fragen unterstützen wir mit Beratung, Coaching und Seminaren zu Flutter.

Häufige Fragen zu Flutter

Muss man für jede Plattform eigenen Code schreiben?

Größtenteils nicht. Oberfläche und Geschäftslogik lassen sich meist vollständig teilen. Eigener Code wird nötig, wenn eine App Plattformfunktionen nutzt, für die es kein fertiges Plugin gibt, oder wenn sie sich auf iOS und Android bewusst unterschiedlich verhalten soll.

Wie schnell lernt man Flutter mit Programmiererfahrung?

Wer Java, Kotlin, C# oder TypeScript beherrscht, lernt Dart in wenigen Tagen. Die eigentliche Lernkurve liegt im Widget-Konzept, im Umgang mit Zustand und in der Architektur größerer Apps. Für ein produktives Arbeiten im Team sollte man einige Wochen einplanen.

Sind Flutter-Apps so schnell wie native Apps?

Für die meisten Geschäftsanwendungen ist der Unterschied im Alltag kaum spürbar, weil Dart in Maschinencode übersetzt wird und die Grafik-Engine direkt auf die Grafikkarte zugreift. Flutter-Apps sind allerdings in der Regel etwas größer als vergleichbare native Apps, weil die Engine mitgeliefert wird.

Eignet sich Flutter auch für Webanwendungen?

Für interne Anwendungen und Dashboards ja, besonders wenn es bereits eine Flutter-App gibt. Für öffentliche Websites, die gut gefunden werden und schnell laden sollen, sind klassische Webframeworks die bessere Wahl.