Flutter Widgets — was es ist, Widget-Baum und build

Was sind Flutter Widgets?

Flutter Widgets — alle UI-Elemente im Flutter-Framework, implementiert als unveränderliche (immutable) Dart-Klassen. Ein Widget ist die Konfiguration eines UI-Elements: seine Größe, Farbe, Position und Ereignisbehandlungen. Im Gegensatz zu Android (XML + View) oder iOS (Storyboard + UIView) verwendet Flutter keine nativen Komponenten — alles wird von der Skia-Engine (Android/iOS/Linux) oder Impeller (iOS/macOS) auf einer Canvas gezeichnet. Dies sorgt für ein einheitliches Erscheinungsbild auf allen Plattformen ohne Plattformunterschiede. Flutter wird mit zwei Widget-Sätzen ausgeliefert: Material Widgets (Google Material Design 3 für Android/Web) und Cupertino Widgets (Apple HIG für iOS/macOS). Der Entwickler kann beide Sätze in einer einzigen Anwendung kombinieren. Jedes Widget hat eine build()-Methode, die ein untergeordnetes Widget oder eine Zusammensetzung davon zurückgibt — so wird der Widget-Baum aufgebaut.

Die drei Flutter-Bäume

Flutter arbeitet mit drei Bäumen: Widget Tree (Konfiguration, vom Entwickler erstellt), Element Tree (Zuordnung des Widgets zu seiner Position im Baum, vom Framework verwaltet) und Render Tree (Objekte, die das Layout berechnen und das Zeichnen durchführen). Ein Widget erzeugt ein Element, das ein RenderObject erzeugt. Das Element wird bei einer Konfigurationsänderung (Rebuild) wiederverwendet — dies ist der Optimierungsmechanismus von Flutter: Wenn Widget-Typ und Key übereinstimmen, wird das Element nicht neu erstellt, sondern mit der neuen Konfiguration aktualisiert. Das Verständnis der drei Bäume ist der Schlüssel zur Optimierung der Leistung von Flutter-Anwendungen.

StatelessWidget: unveränderliche Widgets

StatelessWidget — ein Widget, das keinen internen Zustand speichert. Es nimmt Parameter über den Konstruktor entgegen und zeigt sie ohne Änderungsmöglichkeit nach dem build an. StatelessWidget ist ideal für statische Elemente: Überschriften, Symbole, Avatare, Listen mit festen Daten. Die build()-Methode wird einmal bei der Erstellung und bei Änderung des übergeordneten Widgets aufgerufen. Da StatelessWidget keinen Zustand hat, benötigt es kein separates State-Objekt — build() wird direkt in der Widget-Klasse definiert.

import 'package:flutter/material.dart';

class ProfileHeader extends StatelessWidget {
  final String name;
  final String avatarUrl;

  const ProfileHeader({super.key, required this.name, required this.avatarUrl});

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        CircleAvatar(
          radius: 24,
          backgroundImage: NetworkImage(avatarUrl),
        ),
        const SizedBox(width: 12),
        Text(
          name,
          style: const TextStyle(
            fontSize: 18,
            fontWeight: FontWeight.bold,
          ),
        ),
      ],
    );
  }
}

ProfileHeader — ein StatelessWidget, das name und avatarUrl über den Konstruktor erhält. CircleAvatar zeigt den Avatar an, Text zeigt den Namen. Das Widget kann diese Werte nach der Erstellung nicht ändern. Die Verwendung eines const-Konstruktors (const ProfileHeader) ermöglicht es Flutter, die Widget-Instanz beim Eltern-Rebuild wiederzuverwenden — eine Mikrooptimierung, die für alle StatelessWidgets empfohlen wird.

StatefulWidget: Widgets mit Zustand

StatefulWidget — ein Widget mit veränderbarem Zustand, der in einem separaten State-Objekt gespeichert ist. Das StatefulWidget selbst ist unveränderlich, wie StatelessWidget. Der veränderbare Teil wird an State delegiert: State ist ein Objekt, das einmal erstellt wird und mehrere Widget-Rebuilds überlebt. Wenn sich der Zustand ändert (setState()), ruft Flutter build() im State auf und aktualisiert die UI. StatefulWidget wird für interaktive Elemente verwendet: Zähler, Textfelder, Kontrollkästchen, Animationen, Timer.

import 'package:flutter/material.dart';

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

  @override
  State<LikeButton> createState() => _LikeButtonState();
}

class _LikeButtonState extends State<LikeButton> {
  bool liked = false;
  int count = 42;

  void _toggleLike() {
    setState(() {
      liked = !liked;
      count += liked ? 1 : -1;
    });
  }

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: _toggleLike,
      child: Text(liked ? '♥ $count' : '♡ $count'),
    );
  }
}

LikeButton — ein StatefulWidget mit der State-Klasse _LikeButtonState. Die Felder liked und count sind im State gespeicherte Zustände und werden beim Rebuild nicht zurückgesetzt. setState() benachrichtigt Flutter, dass die UI neu aufgebaut werden muss. Flutter erstellt State nicht bei jedem Eltern-Rebuild neu — nur bei Änderung der Konfiguration (Key oder Widget-Typ). Bei IT Sectr verwenden wir StatelessWidget für die Anzeige und StatefulWidget für interaktive Komponenten, nach dem Prinzip, StatefulWidget auf die Grenzen der Mutation zu minimieren.

Widget-Baum: von Widget zu RenderObject

Widget Tree — eine hierarchische Struktur von Widgets, die die UI der Anwendung beschreibt. Flutter wandelt den Widget Tree in einen Element Tree um: jedes Widget erzeugt ein Element, das seine Position im Baum und seine Verbindung zu einem RenderObject verfolgt. Der Render Tree führt das Layout (Bestimmung von Größen und Positionen) und das Zeichnen (Rendering) durch. Das Element ist eine wichtige Optimierungsschicht: Wenn sich Widget-Typ und Key während eines Rebuilds nicht geändert haben, wird das Element wiederverwendet, wobei die Konfiguration aktualisiert wird, ohne das RenderObject neu zu erstellen. Dies gewährleistet die Leistung von Flutter bei hohen Bildraten (60/120 FPS).

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Flutter-Widgets')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Icon(Icons.flutter_dash, size: 80),
            const SizedBox(height: 16),
            const Text(
              'Hallo, Flutter!',
              style: TextStyle(fontSize: 24),
            ),
          ],
        ),
      ),
    );
  }
}

HomeScreen-Widget-Baum: Scaffold → AppBar + Center → Column → [Icon, SizedBox, Text]. Scaffold ist das übergeordnete Material Design Layout-Widget. Center zentriert seine untergeordnete Column. Column ordnet die Kinder vertikal mit zentrierter Ausrichtung an (mainAxisAlignment.center). Flutter berechnet das Layout von oben nach unten (Einschränkungen werden vom Elternobjekt übergeben) und die Größen von unten nach oben (sizedByParent oder Größenanpassung von Kindern).

BuildContext: Build-Kontext und Baumzugriff

BuildContext — ein Deskriptor der Position des Widgets im Element Tree. Jede build()-Methode erhält einen BuildContext, über den das Widget Zugriff hat auf: MediaQuery (Bildschirmgröße, Ausrichtung, Pixeldichte, sicherer Bereich), Theme (MaterialThemeData oder CupertinoThemeData), Navigator (Navigationsstapel), ScaffoldMessenger (SnackBar), InheritedWidget (Weitergabe von Daten nach unten im Baum). BuildContext sollte nach Abschluss von build() nicht gespeichert oder außerhalb eines synchronen Kontexts verwendet werden — dies führt zu Fehlern wie „Scaffold.of() called with a context that does not contain a Scaffold“. Anstatt den Kontext zu speichern, verwenden Sie das Builder-Widget oder das InheritedWidget-Muster für den Datenzugriff.

Key: Widget-Identifikation im Baum

Key — ein optionaler Konstruktorparameter für jedes Widget (super.key). Der Key hilft Flutter, ein Widget zu identifizieren, wenn sich die Reihenfolge oder Anzahl der Elemente in einer Liste ändert. Ohne Key vergleicht Flutter Widgets nach Typ und Position; beim Hinzufügen eines Elements in der Mitte einer Liste ohne Key verwendet Flutter das Element für das falsche Widget wieder, was zu Zustandsfehlern (StatefulWidget) und Animationsproblemen führt. Verwenden Sie ValueKey (eindeutige Kennung) für Listen, ObjectKey (basierend auf dem Datenobjekt), UniqueKey (garantiert eindeutig bei jedem Rebuild — für erzwungene Neuerstellung).

Flutter Widget-Katalog: Material, Cupertino, Layout

Flutter SDK (stabile Version 3.3+, Dart 3+) enthält über 200 integrierte Widgets, unterteilt in Kategorien: Layout (Row, Column, Stack, Container, Expanded, Flexible, Wrap, GridView, ListView, CustomScrollView), Material Design (Scaffold, AppBar, Card, Drawer, BottomNavigationBar, FloatingActionButton, TabBar, Chip, DataTable), Cupertino (CupertinoPageScaffold, CupertinoNavigationBar, CupertinoButton, CupertinoTabBar), Painting & Effects (Opacity, DecoratedBox, ClipRect, Transform, BackdropFilter, ShaderMask), Async (FutureBuilder, StreamBuilder) und Accessibility (Semantics, MergeSemantics, ExcludeSemantics). Layout-Widgets sind die Grundlage jeder Flutter-UI: Row für horizontale Sequenzen, Column für vertikale, Stack für überlappende Elemente, Container mit BoxDecoration für Dekoration.