Flutter — Schlüsselkonzepte, Architektur und Widgets

Was ist Flutter

Flutter ist ein SDK (Software Development Kit) und Framework zur Erstellung von Benutzeroberflächen, das von Google im Jahr 2015 angekündigt wurde. Die erste stabile Version Flutter 1.0 wurde im Dezember 2018 veröffentlicht. Im Gegensatz zu React Native verwendet Flutter keine Brücke zwischen JavaScript und nativem Code — es kompiliert direkt in native Prozessoranweisungen.

Das Hauptmerkmal von Flutter ist seine eigene Rendering-Engine. Das Framework verlässt sich nicht auf UIKit (iOS) oder das View-System von Android. Stattdessen zeichnet Flutter jedes Pixel unabhängig über Skia (vor 2024) oder die neue Impeller-Engine. Dies garantiert ein einheitliches Erscheinungsbild auf allen Plattformen und beseitigt Anpassungsprobleme zwischen verschiedenen OS-Versionen.

Laut Statista 2024 belegt Flutter den ersten Platz unter den plattformübergreifenden Frameworks in Bezug auf die Beliebtheit: Etwa 46% der Entwickler verwenden es für die mobile Entwicklung. Das Framework wird in Projekten von Google Pay, Alibaba, eBay, BMW und Tencent eingesetzt.

Geschichte und Versionen von Flutter

Die erste Alpha-Version von Flutter wurde 2015 auf dem Dart Developer Summit unter dem Namen Sky vorgestellt. 2018 wurde Flutter 1.0 mit Unterstützung nur für iOS und Android veröffentlicht. Flutter 2.0 (2021) fügte Web- und Desktop-Unterstützung hinzu. Flutter 3.0 (2022) führte stabile Unterstützung für macOS und Linux ein. Flutter 3.16 (2023) stellte Impeller vor — eine neue Rendering-Engine basierend auf Metal und Vulkan.

Flutter 3.22 (2024) enthält Impeller standardmäßig auf iOS, verbesserte Material Design 3-Unterstützung, Dart 3.4 mit Makro-Erweiterungen und integrierte Native Assets-Unterstützung für direkten Zugriff auf Plattformressourcen. Google berichtet, dass Impeller Frame-Ruckler um 90% im Vergleich zu Skia reduziert.

Die Sprache Dart

Dart ist eine Programmiersprache, die von Google im Jahr 2011 entwickelt und in Flutter verwendet wird. Dart kombiniert strenge Typisierung mit JIT-Kompilierung (für Hot Reload) und AOT-Kompilierung (für Produktions-Builds). Dart 3.0 (2023) führte Pattern Matching, versiegelte Klassen und Records als stabile Funktionen ein.

Null safety in Dart ist eine obligatorische Funktion, die seit Version 2.12 eingeführt wurde. Der Compiler überprüft alle nullbaren Typen zur Build-Zeit und eliminiert NullPointerException zur Laufzeit. Datentypen (int, String, bool) sind standardmäßig nicht nullbar, und nullbare Werte verwenden das Suffix ? (z. B. String? name).

Flutter-Architektur

Die Flutter-Architektur basiert auf einem Dreischichten-Prinzip. Die untere Schicht ist die Engine (C/C++), verantwortlich für Rendering, I/O und Zugriff auf Plattform-APIs. Die mittlere Schicht ist das Framework (Dart), das das Widget-System, Gesten, Animationen und Navigation implementiert. Die obere Schicht ist die Anwendung (Dart), die Widgets zu einem Baum zusammenfügt.

Widgets und der Widget-Baum

In Flutter ist alles ein Widget. Es gibt zwei Arten von Widgets: StatelessWidget (unveränderlich, speichert keinen Zustand) und StatefulWidget (veränderlich, verwaltet Zustand über State). Der Widget-Baum ist eine hierarchische Struktur, in der jedes untergeordnete Widget innerhalb eines übergeordneten verschachtelt ist. Scaffold, AppBar, Container, Text, Column, Row — dies sind die grundlegenden Bausteine.

BuildContext ist ein Objekt, das die Position des Widgets im Baum mitteilt. MediaQuery.of(context) ruft Bildschirmabmessungen ab, Theme.of(context) ruft das aktuelle Thema ab. BuildContext wird für Navigation (Navigator.of(context)), Zugriff auf InheritedWidget und Locale-Übersetzung über Localizations.of verwendet.

Die Impeller-Engine

Impeller ist die moderne Rendering-Engine von Flutter, geschrieben in C++ und mit Metal (iOS/macOS) und Vulkan (Android). Im Gegensatz zu Skia, das jeden Frame von Grund auf neu zeichnete, kompiliert Impeller Shader vorab und speichert sie in einem Cache. Dies beseitigt Verzögerungen beim ersten Rendern komplexer Szenen und reduziert die GPU-Last.

Tests des Google Flutter-Teams zeigen, dass Impeller die Shader-Kompilierungszeit von 200–500 ms (Skia) auf 1–3 ms reduziert. Auf dem iPhone 13 Pro erreicht Impellers Impuls-Rendering 120 FPS ohne Frame-Einbrüche. Auf Android mit Vulkan liefert es stabile 60 FPS selbst auf Mittelklasse-Geräten (Xiaomi Redmi Note 12).

Beispiel einer Flutter-Anwendung

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Flutter-App')),
        body: const Center(
          child: Text('Hallo, Flutter!'),
        ),
      ),
    );
  }
}

Vorteile von Flutter

Einheitliche Codebasis — der Hauptvorteil von Flutter. Ein Dart-Projekt kompiliert für iOS, Android, Web, Windows, macOS und Linux. Laut Google reduziert dies die Entwicklungszeit um 30–50% im Vergleich zu separaten iOS- und Android-Projekten. Alibaba reduzierte die Versionsfreigabezeit nach der Umstellung auf Flutter um 30%.

Leistung von Flutter kommt nativen Apps nahe. Die AOT-Kompilierung von Dart in ARM- und x86_64-Maschinencode beseitigt Interpretationsverzögerungen. Die Impeller-Engine garantiert 60 FPS selbst auf Geräten von 2018 (iPhone XR, Samsung Galaxy S9). Laut Google werden 99,5% der Frames in Flutter-Anwendungen ruckelfrei gerendert.

Hot Reload — Technologie für sofortige Code-Updates. Der Entwickler ändert den Quellcode, speichert die Datei, und Flutter baut den Widget-Baum in 300–800 ms neu auf, ohne den aktuellen Anwendungszustand zu verlieren. Dies beschleunigt UI-Design-Iterationen: Ränder, Farben und Animationen können in Sekunden geändert werden, ohne auf einen vollständigen Neubau zu warten.

Material Design 3 und die native Cupertino-Designsprache (iOS-Stil) sind im Standard-Flutter-Paket enthalten. Material 3-Widgets unterstützen dynamische Farben (Material You), responsives Layout und Bildschirmübergangsanimationen. CupertinoPageTransition und CupertinoNavigationBar imitieren das Verhalten des nativen iOS-Navigators.

Anpassung von Widgets erfordert keine benutzerdefinierten Views auf jeder Plattform. Einfach build() überschreiben und ein neues Widget zurückgeben. Die Animationspakete (AnimatedContainer, Hero, TweenAnimationBuilder) und Gestenpakete (GestureDetector, Dismissible) decken 95% der UI-Animationsszenarien ab, ohne Plattformcode zu schreiben.

Flutter-Ökosystem und Pakete

pub.dev ist die offizielle Paketregistrierung für Dart und Flutter. Stand Juli 2024 sind über 45.000 Pakete in der Registrierung veröffentlicht. Die Installation eines Pakets erfolgt mit dem Befehl flutter pub add <Paketname>. Pub löst automatisch Abhängigkeiten auf, prüft die Versionskompatibilität und generiert pubspec.lock.

Zustandsverwaltung in Flutter ist eine der wichtigsten architektonischen Herausforderungen. Neben flutter_bloc gehören zu den beliebten Lösungen: Provider (von Google empfohlen, verwendet InheritedWidget), Riverpod (eine überarbeitete Version von Provider mit Compile-Zeit-Sicherheit) und GetX (Alles-in-einem: Zustand, Routing, DI). Provider bleibt am einfachsten für den Einstieg: ChangeNotifierProvider umschließt das Modell, und Consumer baut das Widget bei Datenänderungen neu auf.

Testen in Flutter wird auf drei Ebenen unterstützt. Unit-Tests (flutter test) prüfen Funktionen und Klassen ohne UI. Widget-Tests (testWidgets) rendern einzelne Widgets in einer isolierten Umgebung. Integrationstests (IntegrationTest) führen die vollständige Anwendung auf einem Gerät oder Simulator aus. Flutter 3.22 fügte Unterstützung für Patch-Tests durch Patch-Analysen und verbesserte Codeabdeckungsberichte hinzu.

Beliebte Pakete

dio ist ein HTTP-Client mit Unterstützung für Interceptors, Timeouts und FormData. Wird in 40% der Flutter-Projekte auf GitHub verwendet. Dio unterstützt Request-Interception für Logging, Wiederholungen und Hinzufügen von Authentifizierungstokens. Die zweitbeliebteste Bibliothek ist retrofit, die typisierte API-Clients generiert.

flutter_bloc ist eine Zustandsverwaltungsbibliothek basierend auf dem BLoC (Business Logic Component)-Muster. BlocProvider gibt Zustände im Widget-Baum nach unten weiter, BlocBuilder baut die UI bei Zustandsänderungen neu auf, und BlocListener behandelt Nebeneffekte (Navigation, SnackBar). Cubit ist eine vereinfachte Version von BLoC ohne Ereignisse.

go_router ist eine deklarative Navigation für Flutter von Google. Routen werden in der GoRouter-Konfiguration beschrieben mit Unterstützung für verschachtelte Routen, Weiterleitungen und Deep Links. ShellRoute teilt die Navigation über BottomNavigationBar-Tabs auf. GoRouter 14.0 unterstützt typsichere Pfade und StatefulShellRoute mit Tab-Zustandserhaltung.