Scaffold: wat is het, structuur en Flutter widgets

Wat is Scaffold in Flutter

Scaffold — een widget-compositor uit de Material Design-bibliotheek die de basis visuele schermstructuur vormt. Het implementeert het standaard Material-app-patroon: bovenpaneel, schermbody, zijmenu en zwevende knoppen. In tegenstelling tot Container, die alleen afmetingen en stijl instelt, beheert Scaffold het hele scherm als een uniform systeem.

Elke Flutter-app gebouwd volgens Material Design begint met MaterialApp, waarbinnen elk scherm in een Scaffold wordt verpakt. Juist Scaffold zorgt voor correcte weergave van AppBar op alle apparaten, rekening houdend met SafeArea voor iPhone X en hoger. Het is ook verantwoordelijk voor de z-volgorde: Drawer wordt boven body weergegeven en SnackBar boven de hele interface, maar onder dialoogvensters.

Volgens de officiële Flutter API Reference (2026) is Scaffold een verplichte voorwaarde voor de correcte werking van widgets zoals SnackBar, BottomSheet en PersistentBottomSheet. Zonder Scaffold gooien deze componenten een uitzondering omdat ze afhankelijk zijn van InheritedWidget Scaffold.of voor toegang tot de Scaffold-context. Daarom is het plaatsen van inhoud direct in Container in plaats van Scaffold een veelgemaakte fout van beginnende ontwikkelaars, wat leidt tot verlies van Material-functionaliteit.

Scaffold in de widget-hiërarchie

In een typische Flutter-app bevindt Scaffold zich binnen MaterialApp, meestal onder WidgetsApp of CupertinoApp bij cross-platform ontwikkeling. MaterialApp creëert Navigator en thema, en Scaffold bepaalt de structuur van het huidige scherm. Elk scherm kan zijn eigen Scaffold hebben met unieke AppBar, Drawer en BottomNavigationBar, wat flexibele aanpassing van de interface voor een specifieke pagina mogelijk maakt.

Voor diepgaande aanpassing kan Scaffold worden gecombineerd met NestedScrollView — dit maakt complexe scrolleffecten mogelijk, zoals een verdwijnende AppBar met parallax-effect. In de meeste gevallen is standaard Scaffold met zijn eigenschappen echter voldoende voor het bouwen van een productie-klaar scherm.

Scaffold-structuur: belangrijkste onderdelen van het frame

Scaffold bestaat uit meerdere verplichte en optionele zones, elk verantwoordelijk voor een specifiek deel van de interface. Laten we elk onderdeel afzonderlijk bekijken om te begrijpen hoe ze met elkaar samenwerken.

AppBar — bovenpaneel

AppBar — het bovenpaneel van het scherm dat de titel, navigatieknop en acties weergeeft. Het krijgt automatisch de juiste hoogte van 56dp en houdt rekening met SafeArea voor apparaten met een notch. In AppBar kan een TabBar worden ingebouwd voor het schakelen tussen tabbladen met behulp van de eigenschap bottom.

Drawer — zijmenu

Drawer — een paneel dat van links komt en navigatie door de secties van de app biedt. Scaffold voegt automatisch het hamburgerpictogram toe aan AppBar als de eigenschap drawer is ingesteld. Drawer kan DrawerHeader, ListView met menu-items en gebruikersinformatie bevatten.

BottomNavigationBar — onderste navigatie

BottomNavigationBar — het paneel onderaan het scherm voor het schakelen tussen hoofdsecties. Het bevat 2 tot 5 pictogrammen met labels en ondersteunt Material 3 met actieve indicatie via NavigationBar. Scaffold plaatst het onderaan het scherm en verschuift body automatisch omhoog zodat inhoud niet wordt bedekt.

FloatingActionButton — zwevende knop

FloatingActionButton — een ronde knop geplaatst in de rechterbenedenhoek van het scherm. Het wordt gebruikt voor de hoofdactie op het scherm, zoals het toevoegen van een nieuw item of het verzenden van een bericht. Scaffold ondersteunt meerdere FABs met uitgebreide animatie via extended-eigenschappen.

Body — hoofdinhoud

Body — het centrale gebied van het scherm waar de hoofdinhoud wordt geplaatst. Als body kan elke widget dienen: Column, ListView, GridView, Stack of een aangepaste compositie. Scaffold berekent automatisch de hoogte van body rekening houdend met AppBar, BottomNavigationBar en SafeArea, wat handmatige aanpassing van afmetingen overbodig maakt.

Belangrijkste eigenschappen van Scaffold

Scaffold biedt meer dan 30 eigenschappen voor het configureren van het uiterlijk en gedrag van het scherm. Hieronder vallen zowel verplichte (body) als optionele eigenschappen die marges, achtergrond en toetsenbordstatus beheren. Inzicht in elke eigenschap helpt om de interface precies af te stemmen op ontwerpeisen.

De eigenschap resizeToAvoidBottomInset is vooral belangrijk bij het werken met formulieren: wanneer ingesteld op true (standaard), drukt Scaffold body automatisch samen bij het verschijnen van het toetsenbord zodat het invoerveld zichtbaar blijft. Dit elimineert de noodzaak om aangepaste toetsenbordluisteraars te schrijven. Voor aangepaste scenarioën met SingleChildScrollView kan de eigenschap worden uitgeschakeld.

Voorbeeld van Scaffold-gebruik in een app

Laten we een praktisch voorbeeld bekijken van Scaffold met een volledige set Material-componenten. De code creëert een scherm met AppBar, Drawer, BottomNavigationBar, FloatingActionButton en SnackBar — de typische structuur van een mobiele app 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('Mijn App'),
        actions: [
          IconButton(icon: const Icon(Icons.search), onPressed: () {}),
        ],
      ),
      body: pages[selectedIndex],
      drawer: Drawer(
        child: ListView(
          children: [
            const DrawerHeader(child: Text('Menu')),
            ListTile(title: const Text('Instellingen'), 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('Actie voltooid')),
          );
        },
        child: const Icon(Icons.add),
      ),
    );
  }
}

In het voorbeeld wordt NavigationBar uit Material 3 gebruikt in plaats van de verouderde BottomNavigationBar. Scaffold verbindt automatisch alle onderdelen: bij het openen van Drawer wordt SnackBar verborgen, bij het schakelen van tabbladen wordt body bijgewerkt en FloatingActionButton blijft op zijn plaats. ScaffoldMessenger garandeert weergave van SnackBar, zelfs bij meerdere Scaffolds in de hiërarchie.

Scaffold en Material 3: configuratiekenmerken

Material 3 (M3) — is de evolutie van Material Design, gepresenteerd door Google in 2023. Scaffold in M3 kreeg een aantal wijzigingen: de nieuwe NavigationBar-widget in plaats van BottomNavigationBar, ondersteuning voor Dynamic Color via ColorScheme.fromSeed en bijgewerkte aanbevelingen voor marges en hoogtes van componenten. Overstappen naar M3 vereist geen vervanging van Scaffold — het volstaat om het thema van de app bij te werken.

Om Material 3 in het project in te schakelen, moet u useMaterial3: true instellen in ThemeData. Scaffold past het visuele uiterlijk automatisch aan: marges worden groter (24dp in plaats van 16dp), kleuren worden herberekend uit de seed-kleur en FloatingActionButton krijgt grotere afmetingen met afgeronde hoeken. Tegelijkertijd blijven alle bestaande eigenschappen van Scaffold functioneel.

Volgens Material Design 3 Specification (2026) wordt aanbevolen om NavigationBar met drie tot vijf items te gebruiken in plaats van BottomNavigationBar. Scaffold ondersteunt beide varianten, maar NavigationBar biedt betere ondersteuning voor aanpassingsvermogen en Material You op Pixel-apparaten.

Scaffold configureren voor Material 3

Voor correcte werking van Scaffold met M3 volstaat het om het thema bij te werken en BottomNavigationBar te vervangen door NavigationBar. Kleuren worden automatisch berekend via ColorScheme.fromSeed en Scaffold past de marges aan de nieuwe standaarden aan. Indien nodig kunt u backgroundColor direct overschrijven.