Flutter in der mobilen Entwicklung: Was es ist, Schlüsselkonzepte und wie es funktioniert

Flutter: Grundlagen von Widget, StatelessWidget und StatefulWidget

Widget — eine deklarative Beschreibung eines Teils der UI. Alles in Flutter ist ein Widget: von einem Button bis zur App selbst. Ein Widget ist eine Konfiguration (nicht die UI selbst). StatelessWidget — ein unveränderliches Widget. build() wird einmal aufgerufen. Hat keinen Zustand. Wird für statische Inhalte verwendet. StatefulWidget — ein veränderliches Widget. Hat ein State-Objekt, das sich ändern kann. setState() — löst einen Neubau aus. State — ein veränderliches Objekt, das an ein StatefulWidget gebunden ist. Enthält Daten, die sich ändern können.

StatelessWidget vs StatefulWidget

StatelessWidget — build() wird einmal aufgerufen. Geeignet für Überschriften, Symbole, statische Texte. StatefulWidget — build() wird jedes Mal aufgerufen, wenn setState() aufgerufen wird. Geeignet für Formulare, Listen mit Änderungen, Timer. InheritedWidget — Datenweitergabe nach unten ohne explizite Übergabe über Konstruktoren. Theme, MediaQuery, Navigator — InheritedWidgets. BuildContext — Position eines Widgets im Baum. context.of<T>, context.watch<T>, context.select<T,R> — Zugriff auf InheritedWidget.

// Beispiel Flutter Widget: StatefulWidget mit setState
class CounterWidget extends StatefulWidget {
  const CounterWidget({Key? key}) : super(key: key);

  @override
  State<CounterWidget> createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  int _counter = 0;

  void _increment() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Flutter Counter')),
      body: const Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text('You have pushed the button:'),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _increment,
        child: const Icon(Icons.add),
      ),
    );
  }
}

Widget — Konfiguration. StatelessWidget — unveränderlich. StatefulWidget — veränderlich mit setState(). IT Sectr empfiehlt, mit StatelessWidget zu beginnen und nur dann zu StatefulWidget zu wechseln, wenn ein Zustand benötigt wird.

Bäume (Widget Tree, Element Tree, RenderObject Tree)

Flutter verwendet drei Bäume für effizientes Rendering. Widget Tree — Konfigurationsbaum. Widgets werden häufig erstellt (jeder Build), leichtgewichtig. Element Tree — Elementbaum. Ein Element pro Widget (wenn sich der Typ nicht ändert). Element — Brücke zwischen Widget und RenderObject. RenderObject Tree — Rendering-Baum. Verarbeitet Größen, Positionen, Zeichnung. RenderObject — schwer, wird selten erstellt. Flutter vergleicht den Widget Tree und aktualisiert den Element Tree, was die Aktualisierung des RenderObject Tree auslöst.

Keys und Element Tree

Key — Widget-Identifikator im Element Tree. ValueKey, ObjectKey, UniqueKey, PageStorageKey. Keys ermöglichen Flutter, alte und neue Widgets beim Neubau zuzuordnen. Ohne Keys ordnet Flutter nach Widget-Typ und Position zu. GlobalKey — Zugriff auf State von einem anderen Widget. Verwendung für: komplexe Formulare, Animationen, State-Zugriff in Tests. IT Sectr empfiehlt die Verwendung von Keys für Listen (List.generate) und GlobalKey nur bei Bedarf zu verwenden.

Expanded — Widget, das verfügbaren Platz in Row/Column/Flex ausfüllt. Flexible — erzwingt keine Füllung (kann kleiner sein). MediaQuery — InheritedWidget mit Geräteinformationen: Bildschirmgröße, Ausrichtung, Plattform, Textskalierungsfaktor. Theme/ThemeData — zentralisiertes Design. Theme.of(context) — Zugriff. MaterialApp — root Widget für Routing-, Design- und Gebietsschemakonfiguration. Scaffold — grundlegendes Layout mit AppBar, Drawer, BottomNavigationBar. AppBar — obere Leiste.

Navigation (Navigator, Route)

Navigator — Routenstapel (Routes). Navigator.push — Bildschirm öffnen (gibt Future zurück). Navigator.pop — schließen (mit Ergebnis). MaterialPageRoute — animierter Übergang (Slide von rechts). Named Routes — String-Identifikatoren. onGenerateRoute — zentralisierter Handler. Navigator 2.0 (Router + RouteInformationParser + RouterDelegate) — deklarative Navigation für Web, Deep Linking und komplexe Szenarien.

Navigator 2.0

Navigator 2.0 — deklarative Navigation. Router — zentrales Widget. RouteInformationParser — URL-Parsing. RouterDelegate — Stapelverwaltung. GoRouter (Paket) — vereinfachter Wrapper über Navigator 2.0. Unterstützt: benannte Routen, Parameter, Weiterleitung, Deep Linking. IT Sectr empfiehlt GoRouter für die meisten Projekte und Navigator 2.0 nur für komplexe Szenarien (Web, Desktop).

Asynchronität (FutureBuilder, StreamBuilder)

FutureBuilder — Widget, das UI basierend auf einem Future erstellt. connectionState: none, waiting, active, done. Verwendung für: HTTP-Anfragen, DB-Lesevorgänge, Timer. StreamBuilder — Widget für Stream (unendlicher Datenfluss). snapshot.data, snapshot.hasError, snapshot.hasData. Verwendung für: WebSocket, Firebase, Standortaktualisierungen. Beide Widgets werden beim Erhalt neuer Daten neu erstellt.

Zustandsverwaltung

Provider — einfache DI + Zustandsverwaltung. ChangeNotifierProvider, MultiProvider. Riverpod — moderner Ersatz für Provider: kompiliersicher, unabhängig von BuildContext. Bloc — ereignisgesteuerte Architektur: Cubit (einfache Ereignisse) vs Bloc (komplexe). GetX — leichtgewichtige Zustandsverwaltung + DI + Routing. setState — am einfachsten, für lokalen Zustand. IT Sectr empfiehlt Riverpod für neue Projekte und Provider für bestehende.

Designs und Anpassung (MediaQuery, ThemeData)

MediaQuery — Bildschirmgröße, Ausrichtung, Plattform, textScaleFactor. MediaQuery.of(context).size.width. ThemeData — App-Design: Farben, Schriftarten, Formen. Theme.of(context).textTheme.bodyLarge. Hot Reload — Code-Injektion in eine laufende App. Behält den Zustand bei. Nicht unterstützt: Ändern von main(), globalen Variablen, statischen Feldern. Hot Restart — vollständiger App-Neustart (Zustandsverlust). Hot Reload — Flutters Hauptvorteil für Entwickler.

StatelessWidget — für statische Inhalte. StatefulWidget — für dynamische Inhalte. InheritedWidget — für DI. IT Sectr empfiehlt standardmäßig StatelessWidget und StatefulWidget nur bei Bedarf.

Responsives Layout

LayoutBuilder — an die Maße des übergeordneten Elements anpassen. OrientationBuilder — an die Ausrichtung anpassen. Expanded vs Flexible — Platzverteilung in Row/Column. MediaQuery — Breakpoints für Tablets und Desktops. SafeArea — Abstände von Systemelementen (Notch, Statusleiste). AspectRatio — Proportionen beibehalten. IT Sectr empfiehlt LayoutBuilder für adaptive Layouts und OrientationBuilder für Querformat.

Testen (Widget, Integration, Unit)

Unit-Tests — Testen von Geschäftslogik, Repositories, Modellen. dart test — Ausführung. Widget-Tests — Testen von Widgets isoliert. WidgetTester — pumpWidget, tap, enterText. Integrationstests — vollständige Szenarien auf einem echten Gerät/Emulator. Mockito — Mocking von Abhängigkeiten. Golden-Tests — Bildschirmvergleich (Golden-Dateien). IT Sectr empfiehlt Widget-Tests für jeden Bildschirm und Unit-Tests für die Geschäftslogik.

void main() {
  testWidgets('Counter increments on tap', (tester) async {
    await tester.pumpWidget(const MaterialApp(home: CounterWidget()));

    expect(find.text('0'), findsOneWidget);

    await tester.tap(find.byType(FloatingActionButton));
    await tester.pump();

    expect(find.text('1'), findsOneWidget);
  });
}

Animationen (Implizit, Explizit, Hero)

Implizite Animationen — AnimatedContainer, AnimatedOpacity, AnimatedPadding, TweenAnimationBuilder. Eigenschaftsänderungen werden automatisch animiert. Explizite Animationen — AnimationController mit Tween. forward() / reverse(). Hero-Animation — Hero Widget mit einem Tag — Überganganimation zwischen Bildschirmen. Gestaffelte Animation — Animationskette mit Interval. Lottie — Integration von After Effects-Animationen. Rive — interaktive Animationen (State Machine). IT Sectr empfiehlt AnimatedContainer für 80% der Fälle und AnimationController für komplexe Szenarien.

class AnimatedBox extends StatefulWidget {
  @override
  State<AnimatedBox> createState() => _AnimatedBoxState();
}

class _AnimatedBoxState extends State<AnimatedBox> {
  bool _expanded = false;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => setState(() => _expanded = !_expanded),
      child: AnimatedContainer(
        duration: const Duration(milliseconds: 300),
        curve: Curves.easeInOut,
        width: _expanded ? 200 : 100,
        height: _expanded ? 200 : 100,
        color: _expanded ? Colors.blue : Colors.red,
        child: const Center(child: Text('Tap me')),
      ),
    );
  }
}

Netzwerk (http, dio, graphql)

http — einfacher HTTP-Client (get, post, put, delete). dio — erweiterter Client mit Interceptors, Timeouts, Wiederholungen, Logging. graphql_flutter — GraphQL-Client für Flutter. json_serializable — Generierung von fromJson/toJson über Annotationen. Retrofit Dart — typsicherer HTTP-Client wie Retrofit. WebSocket — über web_socket_channel. Firebase — Cloud Firestore, Realtime Database, Cloud Functions. IT Sectr empfiehlt dio für REST API und graphql_flutter für GraphQL.

Flutter DevTools — Werkzeugsatz: Inspector (Widget-Baum), Timeline (Leistung), Memory, Network, Logging. Profile mode — Profiling ohne Debug. Performance overlay — FPS, Build-Zeiten. Flame chart — Flammendiagramm-Tracing. DevTools — unverzichtbares Werkzeug zur Optimierung von Flutter-Anwendungen in der Produktion.

Flutter Web — Kompilierung von Flutter zu WASM (WebAssembly). CanvasKit (Skia) vs HTML renderer. CanvasKit — pixelgenau, aber schwerer. HTML renderer — leicht, aber mit Einschränkungen. WASM (Flutter 3.22+) — native Leistung. Responsive Anpassung über LayoutBuilder und MediaQuery. IT Sectr empfiehlt CanvasKit für Desktop-Webanwendungen und HTML renderer für Inhaltsseiten.