AppBar — wat is het, configuratie en Flutter-widgets

Wat is AppBar in Flutter

AppBar — is een standaard Material-component van het bovenste paneel dat bovenaan Scaffold wordt weergegeven. Het bevat de schermtitel, navigatieknop (meestal een hamburgerpictogram of „Terug“-pijl) en acties — pictogrammen die zoeken, instellingen of andere functies openen. AppBar past zich automatisch aan het platform aan: op Android wordt de standaard Material bottom-shadow gebruikt, op iOS — een platter ontwerp met transparantie.

AppBar implementeert de PreferredSizeWidget-interface, wat betekent dat de hoogte vast is en bekend is vóór het bouwen. Standaard is de hoogte van AppBar 56dp op Android en 44dp op iOS in portretoriëntatie, rekening houdend met SafeArea bovenaan. Deze functie stelt Scaffold in staat om vooraf de beschikbare ruimte voor body te berekenen, waardoor hercompositie tijdens het renderen wordt vermeden.

Volgens Flutter Material Library Guide (2026) heeft AppBar verschillende iteraties doorgemaakt: in Flutter 1.x was het een eenvoudige container met tekst, in Flutter 2.x kreeg het ondersteuning voor Material 3 en flexibleSpace, en in Flutter 3.x — integratie met System UI (kleur van de statusbalk, transparantie). Moderne AppBar ondersteunt Dynamic Color van Material You op Android 12+-apparaten.

Structuur van AppBar: eigenschappen en parameters

AppBar biedt een set parameters die elk deel van het bovenste paneel beheren. Inzicht in deze eigenschappen maakt flexibele aanpassing van het paneel aan elk ontwerp mogelijk zonder aangepaste oplossingen te maken.

Title en leading: configuratie van titel en navigatie

De eigenschap title accepteert elke widget, maar meestal wordt Text gebruikt met stijlconfiguratie via TextStyle. Voor lange titels wordt aanbevolen om title in Flexible te wikkelen zodat de tekst correct wordt afgekapt bij ruimtegebrek. De eigenschap leading wordt automatisch vervangen door BackButton bij het navigeren naar een genest scherm via Navigator.push, als deze niet expliciet is ingesteld.

Actions: plaatsing van actiepictogrammen

De lijst actions bevat widgets die rechts uitgelijnd zijn in AppBar. Elk element mag niet breder zijn dan 48dp (Material Design-standaard). Voor het groeperen van acties gebruikt u PopupMenuButton — dit verbergt minder belangrijke opties in een vervolgkeuzemenu en voldoet aan de Material-richtlijnen voor interface-dichtheid.

Aanpassing van AppBar: stijlen, kleuren en gedrag

AppBar ondersteunt diepgaande aanpassing via eigenschappen voor kleur, schaduw en marges. Het basisuiterlijk wordt overgenomen uit het thema van de app, maar elke eigenschap kan individueel worden overschreven. Laten we de belangrijkste configuratiescenario’s bekijken.

De achtergrondkleur van AppBar wordt ingesteld via backgroundColor. Indien niet gespecificeerd, wordt appBarTheme uit ThemeData gebruikt. In Material 3 wordt de kleur van AppBar automatisch berekend uit ColorScheme.primary, maar kan worden overschreven voor een specifiek scherm. Voor een transparante AppBar (vaak gebruikt in profielen) stelt u backgroundColor: Colors.transparent in met elevation: 0.

De eigenschap elevation beheert de schaduw onder AppBar. Waarde 0 verwijdert de schaduw, waardoor een "plat" paneel-effect ontstaat, wat relevant is voor Material 3. Waarde 4 geeft de standaard Material Design-schaduw. Voor aangepast schaduwbeheer gebruikt u shadowColor — de schaduwkleur die het paneel visueel scheidt van de inhoud.

Voor het beheren van de tekstkleur in AppBar gebruikt u foregroundColor. Deze eigenschap beïnvloedt de kleur van de titel, pictogrammen en tekst in actions. Bij wijziging van backgroundColor wordt automatisch een contrasterende foregroundColor geselecteerd, maar deze kan geforceerd worden ingesteld voor niet-standaard ontwerpen.

SliverAppBar: geanimeerde versie van AppBar

SliverAppBar — is een uitbreiding van AppBar voor gebruik in CustomScrollView, die animatie ondersteunt bij scrollen: inkrimpen (collapsing), parallax-effect en vastzetten (pinned). In tegenstelling tot de standaard AppBar is SliverAppBar een sliver-widget en kan dynamisch van grootte veranderen afhankelijk van de scrollpositie.

De belangrijkste modi van SliverAppBar worden bepaald door de combinatie van eigenschappen pinned, floating en snap. In de pinned-modus blijft het paneel altijd zichtbaar bovenaan het scherm. In de floating-modus verschijnt het bij terugscrollen. De combinatie floating + snap creëert "plakkend" paneelgedrag dat bij de minste omhoog scrollen tevoorschijn komt, wat vaak wordt gebruikt in nieuwsfeeds.

Volgens Flutter API SliverAppBar (2026) moet u voor het gebruik van SliverAppBar de gewone ListView of Column vervangen door CustomScrollView met sliver-widgets. Scaffold blijft correct werken, maar de appBar-eigenschap van Scaffold moet null zijn — SliverAppBar wordt in CustomScrollView als eerste sliver geplaatst.

Voorbeeld van AppBar-configuratie in een app

Laten we een voorbeeld van AppBar met zoeken, vervolgkeuzemenu en TabBar bekijken. Deze code demonstreert een typische configuratie van het bovenste paneel in een productie-Flutter-app.

Scaffold(
  appBar: AppBar(
    title: const Text('Catalogus'),
    centerTitle: true,
    leading: IconButton(
      icon: const Icon(Icons.menu),
      onPressed: () => Scaffold.of(context).openDrawer(),
    ),
    actions: [
      IconButton(
        icon: const Icon(Icons.search),
        onPressed: () => showSearch(context: context, delegate: ProductSearch()),
      ),
      PopupMenuButton<String>(
        onSelected: (String value) {},
        itemBuilder: (context) => [
          const PopupMenuItem(value: 'settings', child: Text('Instellingen')),
          const PopupMenuItem(value: 'about', child: Text('Over de app')),
        ],
      ),
    ],
    bottom: const TabBar(
      tabs: [
        Tab(text: 'All'),
        Tab(text: 'New'),
        Tab(text: 'Popular'),
      ],
    ),
  ),
  body: const TabBarView(
    children: [
      AllProductsPage(),
      NewProductsPage(),
      PopularProductsPage(),
    ],
  ),
)

In het voorbeeld bevat AppBar een gecentreerde titel, een knop om Drawer te openen aan de linkerkant, een zoekpictogram en een vervolgkeuzemenu aan de rechterkant. TabBar in bottom maakt schakelen tussen productcategorieën mogelijk. Deze configuratie dekt de meeste scenario’s van mobiele apps: navigatie, zoeken, extra opties en schakelen tussen secties — alles in één bovenste paneel.