Route — wat is het, soorten en het maken van routes in Flutter

Wat is Route in Flutter

Route — is de basis van het navigatiesysteem van Flutter. Elk scherm dat de gebruiker in de app ziet, wordt vertegenwoordigd door een Route-object in de Navigator-stack. Route abstraheert het scherm van de beheercode: Navigator voegt Routes toe en verwijdert ze, en in de Route bevindt zich de interface die de gebruiker ziet. Deze architectuur scheidt de verantwoordelijkheid tussen navigatie en weergave.

In tegenstelling tot eenvoudige widgetvervanging biedt Route diensten die niet beschikbaar zijn voor gewone widgets: ModalBarrier (het dimmen van de achtergrond bij een geopend dialoogvenster), beheer van de in- en uitgangsanimatie, verwerking van de hardwarematige „Terug”-knop op Android en integratie met Hero-animatie voor vloeiende overgangen tussen schermen.

Volgens Flutter Cookbook (2026) is Route een sleutelelement voor Hero-animatie: de Hero-widget op de ene Route animeert automatisch de overgang naar de Hero-widget op de volgende Route, waardoor een „vliegend” elementeffect ontstaat. Dit is mogelijk juist omdat Route beide schermen in de Overlay houdt tijdens de animatie.

Route als bouwsteen van navigatie

Route is de basis voor zowel eenvoudige mobiele apps (via Navigator 1.0) als complexe scenario's met diepe links (Navigator 2.0). In Navigator 2.0 vertegenwoordigt Route een Page die RouterDelegate converteert uit de routeconfiguratie. Het begrijpen van Route is dus noodzakelijk voor het werken met elk navigatiesysteem van Flutter — ongeacht de gekozen aanpak of het pakket.

Soorten Route: MaterialPageRoute en CupertinoPageRoute

Flutter biedt verschillende ingebouwde implementaties van Route, die elk het gedrag aanpassen aan een specifiek platform. De keuze van het juiste Route-type beïnvloedt de gebruikerservaring: Materiaal-animatie op Android en Cupertino-animatie op iOS creëren het gevoel van een „native” app.

MaterialPageRoute: standaard voor Android

MaterialPageRoute — de meest gebruikte implementatie van Route. Het animeert de binnenkomst van een nieuw scherm van onder naar boven met geleidelijke verschijning. Bij uitgang animeert het scherm van boven naar onder, terugkerend naar de beginpositie. De werkbalk (AppBar) en de inhoud van het scherm worden afzonderlijk geanimeerd, wat een hiërarchie-effect creëert.

CupertinoPageRoute: iOS-navigatiestijl

CupertinoPageRoute imiteert UINavigationController van iOS. Het nieuwe scherm komt van rechts binnen en bedekt het vorige. Het belangrijkste kenmerk — ondersteuning voor het interactieve veeg-terug gebaar, geïmplementeerd via CupertinoBackGestureDetector. Dit gebaar wordt zelfs midden in de animatie verwerkt, wat natuurlijk gedrag biedt dat bekend is voor iPhone-gebruikers.

Levenscyclus van Route: van creatie tot vernietiging

Route heeft zijn eigen levenscyclus die verschilt van de levenscyclus van een gewone StatefulWidget. Het begrijpen van deze cyclus is noodzakelijk voor correcte initialisatie van gegevens, abonneren op streams en vrijgeven van bronnen bij het sluiten van het scherm.

Fasen van de levenscyclus van Route

De levenscyclus van Route bestaat uit vier hoofdfasen. Transition — Route wordt gemaakt en geanimeerd bij binnenkomst (didPush wordt aangeroepen). Active — Route wordt volledig weergegeven en interageert met de gebruiker. Inactive — een andere Route bedekt de huidige (dialoog, onderste scherm), maar Route blijft in de stack. Disposed — Route wordt uit de stack verwijderd en vernietigd, didPop en dispose worden aangeroepen.

De levenscyclusmethoden van Route kunnen worden overschreven in een aangepaste implementatie. Bijvoorbeeld, didPop wordt aangeroepen wanneer Route uit de stack wordt verwijderd — hier kan een concept van gegevens worden opgeslagen. didChangeNext wordt aangeroepen wanneer de volgende Route in de stack is veranderd — handig voor het bijwerken van de UI bij wijziging van de navigatiegeschiedenis.

Volgens Flutter API Route.didPop (2026) is het belangrijk om de levenscyclus van Route niet te verwarren met de levenscyclus van de State binnen Route. De StatefulWidget binnen Route heeft zijn eigen initState en dispose die respectievelijk in de Transition- en Disposed-fasen worden aangeroepen. Route leeft langer dan zijn interne State — Route blijft in de Overlay, zelfs wanneer zijn widgets tijdelijk verborgen zijn door een andere Route.

Gegevensoverdracht via Route tussen schermen

Route biedt mechanismen voor gegevensoverdracht zowel bij binnenkomst (bij creatie) als bij uitgang (bij voltooiing). Correcte gegevensoverdracht via Route elimineert de noodzaak voor globale variabelen en InheritedWidget, waardoor navigatie typeveilig en voorspelbaar wordt.

Voor gegevensoverdracht naar een nieuw scherm wordt de constructor van de ontvangende widget of het argument arguments in Navigator.pushNamed gebruikt. Binnen Route zijn de gegevens toegankelijk via RouteSettings.arguments die is opgeslagen in het Route-object. Deze aanpak werkt voor alle Route-types — MaterialPageRoute, CupertinoPageRoute en aangepaste implementaties.

Voor het retourneren van gegevens wordt het tweede argument Navigator.pop(context, result) gebruikt. Navigator.push retourneert een Future die wordt voltooid met de waarde die aan pop is doorgegeven. Als pop zonder argument wordt aangeroepen, wordt Future voltooid met null. Dit mechanisme is het equivalent van startActivityForResult in Android en completion handler in iOS, maar geïmplementeerd via Dart Futures.

Voorbeeld van gegevensoverdracht via de constructor van Route

Bij een directe aanroep van Navigator.push met MaterialPageRoute worden gegevens overgedragen via de constructor van het doelscherm. MethodChannel wordt niet gebruikt — het is pure Dart-interactie. Deze aanpak heeft de voorkeur voor typeveilige overdracht van complexe objecten.

Voorbeeld van het maken van een aangepaste Route

Laten we een voorbeeld bekijken van het maken van een aangepaste Route met eigen animatie en gegevensoverdracht. PageRouteBuilder maakt het mogelijk om de in- en uitgangsanimatie te definiëren met volledige controle over de animatiecurve en duur.

// Aangepaste Route met schuifanimatie
Navigator.push(context, PageRouteBuilder(
  pageBuilder: (context, animation, secondaryAnimation) {
    return DetailPage(productId: '42');
  },
  transitionsBuilder: (context, animation, secondaryAnimation, child) {
    const begin = Offset(0.0, 0.3);
    const end = Offset.zero;
    final tween = Tween(begin: begin, end: end);
    final offsetAnimation = animation.drive(tween);
    return SlideTransition(position: offsetAnimation, child: child);
  },
  transitionDuration: const Duration(milliseconds: 400),
));

// Gegevens retourneren van scherm
ElevatedButton(
  onPressed: () => Navigator.of(context).pop({'selected': true, 'id': '42'}),
  child: const Text('Selecteer'),
);

// Resultaat ophalen op aanroepend scherm
final result = await Navigator.push(context, MaterialPageRoute(
  builder: (context) => const SelectionPage(),
));
if (result != null) {
  print('Geselecteerd: ${result['selected']}');
}

In het voorbeeld definieert PageRouteBuilder een aangepaste schuif-van-onder-animatie met transparantie. transitionDuration bepaalt de snelheid van de animatie. De code demonstreert ook het doorgeven van het resultaat: het detailscherm retourneert een Map met de keuze van de gebruiker, en het aanroepende scherm ontvangt deze gegevens via de Future van push. Route zorgt voor volledige isolatie: concepten op het detailscherm beïnvloeden de toestand van de lijst niet.