Scaffold: Was es ist, Struktur und Widgets in Flutter

Was ist Scaffold in Flutter

Scaffold ist ein Layout-Widget aus der Material Design-Bibliothek, das die grundlegende visuelle Struktur eines Bildschirms bildet. Es implementiert das Standard-Material-Anwendungsmuster: obere Leiste, Bildschirmkörper, seitliches Menü und schwebende Schaltflächen. Im Gegensatz zu Container, der einfach Abmessungen und Stil festlegt, verwaltet Scaffold den gesamten Bildschirm als einheitliches System.

Jede mit Material Design erstellte Flutter-Anwendung beginnt mit MaterialApp, in der jeder Bildschirm in ein Scaffold eingewickelt wird. Es ist Scaffold, das die korrekte Anzeige von AppBar auf allen Geräten unter Berücksichtigung von SafeArea für iPhone X und höher gewährleistet. Es ist auch für die z-Reihenfolge verantwortlich: Drawer wird über body angezeigt, und SnackBar wird über der gesamten Oberfläche, aber unter Dialogfenstern angezeigt.

Laut der offiziellen Flutter API-Referenz (2026) ist Scaffold eine obligatorische Voraussetzung für die korrekte Funktion von Widgets wie SnackBar, BottomSheet und PersistentBottomSheet. Ohne Scaffold werfen diese Komponenten eine Ausnahme, da sie von InheritedWidget Scaffold.of abhängen, um auf den Scaffold-Kontext zuzugreifen. Daher ist das direkte Platzieren von Inhalten in Container anstelle von Scaffold ein häufiger Fehler von Anfängern, der zum Verlust der Material-Funktionalität führt.

Scaffold in der Widget-Hierarchie

In einer typischen Flutter-Anwendung befindet sich Scaffold innerhalb von MaterialApp, normalerweise unter WidgetsApp oder CupertinoApp bei der plattformübergreifenden Entwicklung. MaterialApp erstellt Navigator und Design, während Scaffold die Struktur des aktuellen Bildschirms definiert. Jeder Bildschirm kann sein eigenes Scaffold mit eindeutiger AppBar, Drawer und BottomNavigationBar haben, was eine flexible Anpassung der Oberfläche an eine bestimmte Seite ermöglicht.

Für tiefgehende Anpassungen kann Scaffold mit NestedScrollView kombiniert werden — dies ermöglicht die Implementierung komplexer Scrolleffekte, wie z. B. eine zusammenklappbare AppBar mit Parallax-Effekt. In den meisten Fällen reicht jedoch das Standard-Scaffold mit seinen Eigenschaften aus, um einen produktionsreifen Bildschirm zu erstellen.

Scaffold-Struktur: Schlüsselteile des Gerüsts

Scaffold besteht aus mehreren obligatorischen und optionalen Bereichen, die jeweils für einen bestimmten Teil der Oberfläche verantwortlich sind. Betrachten wir jeden Teil einzeln, um zu verstehen, wie sie miteinander interagieren.

AppBar — obere Leiste

AppBar ist die obere Leiste des Bildschirms, die den Titel, die Navigationsschaltfläche und Aktionen anzeigt. Sie erhält automatisch die korrekte Höhe von 56dp und berücksichtigt SafeArea für Geräte mit Notch. TabBar kann in AppBar eingebettet werden, um Registerkarten über die bottom-Eigenschaft zu wechseln.

Drawer — seitliches Menü

Drawer ist ein Panel, das von links herausgleitet und die Navigation durch die Anwendungsabschnitte ermöglicht. Scaffold fügt automatisch ein Hamburger-Symbol in AppBar hinzu, wenn die drawer-Eigenschaft gesetzt ist. Drawer kann DrawerHeader, ListView mit Menüpunkten und Benutzerinformationen enthalten.

BottomNavigationBar — untere Navigation

BottomNavigationBar ist ein Panel am unteren Bildschirmrand zum Wechseln zwischen Hauptabschnitten. Es enthält 2 bis 5 Symbole mit Beschriftungen und unterstützt Material 3 mit aktiver Anzeige über NavigationBar. Scaffold positioniert es am unteren Bildschirmrand und verschiebt body automatisch nach oben, damit der Inhalt nicht überlappt wird.

FloatingActionButton — schwebende Aktionsschaltfläche

FloatingActionButton ist eine runde Schaltfläche in der unteren rechten Ecke des Bildschirms. Sie wird für die Hauptaktion auf dem Bildschirm verwendet, z. B. zum Hinzufügen eines neuen Eintrags oder zum Senden einer Nachricht. Scaffold unterstützt mehrere FABs mit erweiterter Animation über extended-Eigenschaften.

Body — Hauptinhalt

Body ist der zentrale Bereich des Bildschirms, in den der Hauptinhalt eingefügt wird. Als body kann jedes Widget dienen: Column, ListView, GridView, Stack oder eine benutzerdefinierte Zusammensetzung. Scaffold berechnet automatisch die body-Höhe unter Berücksichtigung von AppBar, BottomNavigationBar und SafeArea, wodurch manuelle Größenanpassungen überflüssig werden.

Wichtigste Scaffold-Eigenschaften

Scaffold bietet mehr als 30 Eigenschaften zur Anpassung des Erscheinungsbilds und Verhaltens des Bildschirms. Darunter sind sowohl obligatorische (body) als auch optionale, die Ränder, Hintergrund und Tastaturzustand steuern. Das Verständnis jeder Eigenschaft hilft, die Oberfläche genau nach den Designanforderungen zu konfigurieren.

Die Eigenschaft resizeToAvoidBottomInset ist besonders wichtig bei der Arbeit mit Formularen: Wenn sie auf true (Standard) gesetzt ist, verkleinert Scaffold automatisch body, wenn die Tastatur erscheint, um das Eingabefeld sichtbar zu halten. Dies macht benutzerdefinierte Tastatur-Listener überflüssig. Für benutzerdefinierte Szenarien mit SingleChildScrollView kann die Eigenschaft deaktiviert werden.

Beispiel für die Verwendung von Scaffold in einer Anwendung

Betrachten wir ein praktisches Beispiel von Scaffold mit einem vollständigen Satz von Material-Komponenten. Der Code erstellt einen Bildschirm mit AppBar, Drawer, BottomNavigationBar, FloatingActionButton und SnackBar — eine typische mobile Anwendungsstruktur in Flutter.

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

  @override
  State<MainScreen> createState() => _MainScreenState();
}

class _MainScreenState extends State<MainScreen> {
  int selectedIndex = 0;

  final List<Widget> pages = [
    const HomePage(),
    const SearchPage(),
    const ProfilePage(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Meine App'),
        actions: [
          IconButton(icon: const Icon(Icons.search), onPressed: () {}),
        ],
      ),
      body: pages[selectedIndex],
      drawer: Drawer(
        child: ListView(
          children: [
            const DrawerHeader(child: Text('Menü')),
            ListTile(title: const Text('Einstellungen'), onTap: () {}),
          ],
        ),
      ),
      bottomNavigationBar: NavigationBar(
        selectedIndex: selectedIndex,
        onDestinationSelected: (int index) {
          setState(() => selectedIndex = index);
        },
        destinations: const [
          NavigationDestination(icon: Icon(Icons.home), label: 'Home'),
          NavigationDestination(icon: Icon(Icons.search), label: 'Search'),
          NavigationDestination(icon: Icon(Icons.person), label: 'Profile'),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          ScaffoldMessenger.of(context).showSnackBar(
            const SnackBar(content: Text('Aktion abgeschlossen')),
          );
        },
        child: const Icon(Icons.add),
      ),
    );
  }
}

Das Beispiel verwendet NavigationBar aus Material 3 anstelle der veralteten BottomNavigationBar. Scaffold verknüpft automatisch alle Teile: Beim Öffnen von Drawer wird SnackBar ausgeblendet; beim Wechseln von Registerkarten wird body aktualisiert; und FloatingActionButton bleibt an Ort und Stelle. ScaffoldMessenger gewährleistet die SnackBar-Anzeige auch bei mehreren Scaffolds in der Hierarchie.

Scaffold und Material 3: Konfigurationsmerkmale

Material 3 (M3) ist die Weiterentwicklung von Material Design, die von Google im Jahr 2023 vorgestellt wurde. Scaffold in M3 erhielt mehrere Änderungen: ein neues NavigationBar-Widget anstelle von BottomNavigationBar, Unterstützung für dynamische Farben über ColorScheme.fromSeed und aktualisierte Empfehlungen für Ränder und Komponentenhöhen. Der Wechsel zu M3 erfordert keinen Austausch von Scaffold — aktualisieren Sie einfach das Anwendungsdesign.

Um Material 3 in einem Projekt zu aktivieren, muss useMaterial3: true in ThemeData gesetzt werden. Scaffold passt das visuelle Erscheinungsbild automatisch an: Ränder werden größer (24dp statt 16dp), Farben werden aus der Startfarbe neu berechnet, und FloatingActionButton erhält größere Abmessungen mit abgerundeten Ecken. Gleichzeitig bleiben alle vorhandenen Scaffold-Eigenschaften funktionsfähig.

Laut der Material Design 3 Spezifikation (2026) wird empfohlen, NavigationBar mit drei bis fünf Elementen anstelle von BottomNavigationBar zu verwenden. Scaffold unterstützt beide Optionen, aber NavigationBar bietet bessere Unterstützung für Anpassungsfähigkeit und Material You auf Pixel-Geräten.

Scaffold für Material 3 konfigurieren

Für den korrekten Betrieb von Scaffold mit M3 reicht es aus, das Design zu aktualisieren und BottomNavigationBar durch NavigationBar zu ersetzen. Die Farben werden automatisch über ColorScheme.fromSeed berechnet, und Scaffold passt die Ränder an die neuen Standards an. Bei Bedarf kann backgroundColor direkt überschrieben werden.