Navigator: schermbeheer in Flutter

Wat is Navigator in Flutter

Navigator — is een widget die de stack van Route-objecten beheert en schermnavigatie implementeert in een Flutter-app. Elke push-aanroep plaatst een nieuwe Route bovenaan de stack, pop verwijdert de bovenste Route en keert terug naar het vorige scherm. MaterialApp maakt automatisch een Navigator voor de hele app en maakt deze toegankelijk via Navigator.of(context).

In tegenstelling tot StatefulWidget, waar inhoudsverandering plaatsvindt via setState binnen één widget, werkt Navigator met volledige schermen met een eigen levenscyclus. Elke Route in de stack is een geïsoleerde toestand met een eigen BuildContext, wat geheugenlekken voorkomt en afhankelijkheidsbeheer vereenvoudigt. Bij een pop-aanroep wordt de ongebruikte Route vernietigd, waardoor resources vrijkomen.

Volgens Flutter Navigation Guide (2026) is Navigator geëvolueerd van een imperatieve API (Navigator 1.0) naar een declaratieve (Navigator 2.0). Navigator 1.0 gebruikt push/pop-methoden direct, wat handig is voor eenvoudige scenario’s. Navigator 2.0 (Router) is geschikt voor apps met diepe links, adaptieve navigatie en webroutering.

Hoe Navigator onder de motorkap werkt

Intern gebruikt Navigator Overlay — een speciale widget die Routes boven elkaar weergeeft. Elke Route creëert zijn eigen positie in de Overlay met een Z-index die overeenkomt met de diepte in de stack. Dit verklaart waarom bij push het nieuwe scherm boven het vorige wordt geanimeerd, en bij pop — het vorige scherm al klaar is voor weergave: het is niet vernietigd, maar in de Overlay onder het nieuwe gebleven.

Voor overgangsanimaties gebruikt Navigator PageTransitionsTheme, dat kan worden overschreven in ThemeData. Platformanimaties worden ingesteld via CupertinoPageRoute voor iOS (vegen van rechts) en MaterialPageRoute voor Android (vegen van onder). Navigator selecteert automatisch de juiste animatie bij gebruik van PlatformRoute.

Navigator-methoden: push, pop en pushReplacement

Navigator biedt een reeks methoden voor het beheren van de Route-stack. Elke methode lost een specifieke navigatietaak op — van een eenvoudige overgang tot volledige vervanging van de schermgeschiedenis. Laten we de belangrijkste methoden bekijken met gebruiksvoorbeelden.

Push en Pop: basisbewerkingen

Methode push ontvangt een Route en retourneert een Future met het bij pop doorgegeven resultaat. Dit maakt het mogelijk gegevens te ontvangen van het scherm waarnaar is genavigeerd. Bijvoorbeeld, een datumkeuzescherm kan DateTime retourneren via Navigator.pop(context, selectedDate). Methode pop zonder argument retourneert null, met argument — geeft de waarde door aan het aanroepende scherm.

PushReplacement: schermvervanging

pushReplacement vervangt de huidige Route door een nieuwe, waarbij de huidige uit de stack wordt verwijderd. Dit is cruciaal in scenario’s waar de gebruiker niet naar het vorige scherm mag terugkeren. Een typisch voorbeeld — inlogscherm: na succesvol inloggen wordt het huidige scherm vervangen door het hoofdscherm, en de „Terug”-knop keert niet terug naar het inlogformulier.

Benoemde routes en onGenerateRoute

Navigator ondersteunt navigatie via benoemde routes met de methode pushNamed. In plaats van direct een Route te maken, geeft de ontwikkelaar een tekstuele identificatie op, en Navigator maakt automatisch een Route op basis van de configuratie in MaterialApp. Dit vereenvoudigt de code en centraliseert de routedefinitie op één plek.

Benoemde routes worden gedefinieerd via de eigenschap routes in MaterialApp, waar elke sleutel een padstring is en de waarde een functie die een Widget retourneert. Voor dynamische routes (met parameters) wordt onGenerateRoute gebruikt — een callback die RouteSettings ontvangt en een Route retourneert. Dit maakt het mogelijk argumenten door te geven via arguments en diepe navigatie te implementeren.

Volgens Flutter Cookbook (2026) worden argumenten via pushNamed doorgegeven met de parameter arguments: Object?. Het ontvangende scherm haalt argumenten op via ModalRoute.of(context)!.settings.arguments, wat typeveilige gegevensoverdracht garandeert zonder globale variabelen of InheritedWidget.

Afhandeling van onbekende routes

De eigenschap onUnknownRoute in MaterialApp handelt gevallen af waarin pushNamed wordt aangeroepen met een niet-bestaande route. Dit is handig voor het tonen van een 404-scherm of doorverwijzen naar de startpagina. In combinatie met onGenerateRoute zorgt het voor volledige dekking van alle mogelijke navigatiescenario’s.

Navigator 2.0 en declaratieve Router-navigatie

Navigator 2.0 (ook bekend als Router API) — is een declaratieve benadering van navigatie, geïntroduceerd in Flutter 2.0. In tegenstelling tot imperatieve Navigator 1.0, waar de ontwikkelaar push/pop aanroept, beheert Router navigatie via status, waarbij de browser-URL automatisch wordt gesynchroniseerd met het huidige scherm. Dit is vooral belangrijk voor webapps en desktopversies.

De architectuur van Navigator 2.0 bestaat uit drie belangrijke componenten: RouteInformationParser parseert de URL naar een routeconfiguratie, RouterDelegate zet de configuratie om in een lijst van Routes, en BackButtonDispatcher handelt de systeem-„Terug”-knop af. Deze architectuur maakt navigatie volledig voorspelbaar en testbaar.

Om het werken met Navigator 2.0 te vereenvoudigen zijn er wrapper-pakketten: go_router (aanbevolen door Google), auto_route en beamer. go_router biedt een declaratieve DSL voor het definiëren van routes met ondersteuning voor geneste navigatie, redirects en diepe links zonder handmatige implementatie van RouterDelegate. Volgens pub.dev (2026) wordt go_router gebruikt in 35% van de nieuwe Flutter-projecten die de declaratieve benadering verkiezen.

Voorbeeld van navigatie in een Flutter-app

Laten we een voorbeeld van Navigator bekijken met benoemde routes en gegevensoverdracht tussen schermen. De code demonstreert een productlijstscherm, overgang naar het detailscherm en terugkeer met resultaat.

// Routeconfiguratie in MaterialApp
MaterialApp(
  initialRoute: '/',
  onGenerateRoute: (RouteSettings settings) {
    if (settings.name == '/') {
      return MaterialPageRoute(
        builder: (context) => const ProductListPage(),
      );
    }
    if (settings.name == '/product') {
      final productId = settings.arguments as String;
      return MaterialPageRoute(
        builder: (context) => ProductDetailPage(productId: productId),
      );
    }
    return MaterialPageRoute(
      builder: (context) => const NotFoundPage(),
    );
  },
)

// Navigatie met gegevensoverdracht
final result = await Navigator.pushNamed(
  context,
  '/product',
  arguments: 'product_42',
);

// Gegevens ophalen op ontvangend scherm
final args = ModalRoute.of(context)!.settings.arguments as String;

// Scherm vervangen na inloggen
Navigator.pushReplacementNamed(context, '/home');

// Stack wissen naar hoofdscherm
Navigator.pushNamedAndRemoveUntil(
  context,
  '/home',
  (route) => false,
);

In het voorbeeld geeft Navigator.pushNamed de productidentificatie door aan het detailscherm. Bij terugkeer via Navigator.pop(context, updatedProduct) ontvangt het aanroepende scherm de bijgewerkte gegevens in de variabele result. pushReplacementNamed vervangt het huidige scherm na autorisatie, en pushNamedAndRemoveUntil met de voorwaarde (route) => false wist de stack volledig, waardoor terugkeer naar vorige schermen wordt voorkomen.