Route — vad är det, typer och skapande av rutter i Flutter

Vad är Route i Flutter

Route — är grunden för Flutters navigationssystem. Varje skärm som användaren ser i appen representeras av ett Route-objekt som finns i Navigator-stacken. Route abstraherar skärmen från hanteringskoden: Navigator lägger till och tar bort Route, och inuti Route finns gränssnittet som användaren ser. Denna arkitektur separerar ansvaret mellan navigering och visning.

Till skillnad från enkel widget-ersättning tillhandahåller Route tjänster som inte är tillgängliga för vanliga widgets: ModalBarrier (dämpning av bakgrunden vid en öppen dialog), hantering av in- och utträdesanimation, bearbetning av hårdvaruknappen „Tillbaka“ på Android och integrering med Hero-animation för smidiga övergångar mellan skärmar.

Enligt Flutter Cookbook (2026) är Route en nyckelelement för Hero-animation: Hero-widgeten på en Route animerar automatiskt övergången till Hero-widgeten på nästa Route, vilket skapar en „flygande“ elementeffekt. Detta är möjligt just för att Route håller båda skärmarna i Overlay under animationen.

Route som byggsten för navigering

Route är grunden för både enkla mobilappar (via Navigator 1.0) och komplexa scenarier med djupa länkar (Navigator 2.0). I Navigator 2.0 representerar Route en Page som RouterDelegate konverterar från routkonfigurationen. Att förstå Route är alltså nödvändigt för att arbeta med vilket Flutter-navigationssystem som helst — oavsett valt tillvägagångssätt eller paket.

Typer av Route: MaterialPageRoute och CupertinoPageRoute

Flutter erbjuder flera inbyggda implementeringar av Route, som var och en anpassar beteendet för en specifik plattform. Valet av rätt Route-typ påverkar användarupplevelsen: Material-animation på Android och Cupertino-animation på iOS skapar känslan av en „nativ“ app.

MaterialPageRoute: standard för Android

MaterialPageRoute — den mest använda implementeringen av Route. Den animerar inträdet av en ny skärm från botten till toppen med gradvis uppträdande. Vid utträde animeras skärmen från toppen till botten och återgår till startpositionen. Verktygsfältet (AppBar) och skärmens kropp animeras separat, vilket skapar en hierarkieffekt.

CupertinoPageRoute: iOS-navigationsstil

CupertinoPageRoute imiterar UINavigationController från iOS. Den nya skärmen kommer in från höger och täcker den föregående. Huvudfunktionen — stöd för den interaktiva svep-tillbaka-gesten, implementerad via CupertinoBackGestureDetector. Denna gest bearbetas även mitt i animationen och ger naturligt beteende som är bekant för iPhone-användare.

Routes livscykel: från skapande till förstöring

Route har en egen livscykel som skiljer sig från livscykeln för en vanlig StatefulWidget. Att förstå denna cykel är nödvändigt för korrekt initiering av data, prenumeration på strömmar och frigöring av resurser vid stängning av skärmen.

Faser i Routes livscykel

Routes livscykel består av fyra huvudfaser. Transition — Route skapas och animeras vid inträde (didPush anropas). Active — Route visas fullständigt och interagerar med användaren. Inactive — en annan Route täcker den nuvarande (dialog, botten-skärm), men Route förblir i stacken. Disposed — Route tas bort från stacken och förstörs, didPop och dispose anropas.

Livscykelmetoderna för Route kan åsidosättas i en anpassad implementering. Till exempel anropas didPop när Route tas bort från stacken — här kan ett utkast av data sparas. didChangeNext anropas när nästa Route i stacken har ändrats — användbart för att uppdatera UI vid ändring av navigeringshistoriken.

Enligt Flutter API Route.didPop (2026) är det viktigt att inte blanda ihop Routes livscykel med livscykeln för State inuti Route. StatefulWidget inuti Route har egna initState och dispose som anropas i Transition- respektive Disposed-fasen. Route lever längre än sitt interna State — Route förblir i Overlay även när dess widgets tillfälligt döljs av en annan Route.

Dataöverföring via Route mellan skärmar

Route tillhandahåller mekanismer för dataöverföring både vid inmatning (vid skapande) och vid utmatning (vid slutförande). Korrekt dataöverföring via Route eliminerar behovet av globala variabler och InheritedWidget, vilket gör navigeringen typsäker och förutsägbar.

För dataöverföring till en ny skärm används konstruktorn för den mottagande widgeten eller argumentet arguments i Navigator.pushNamed. Inuti Route är data tillgängliga via RouteSettings.arguments som lagras i Route-objektet. Detta tillvägagångssätt fungerar för alla Route-typer — MaterialPageRoute, CupertinoPageRoute och anpassade implementeringar.

För att returnera data används det andra argumentet Navigator.pop(context, result). Navigator.push returnerar en Future som slutförs med värdet som skickades i pop. Om pop anropas utan argument slutförs Future med null. Denna mekanism är motsvarigheten till startActivityForResult i Android och completion handler i iOS, men implementerad via Dart Futures.

Exempel på dataöverföring via Routes konstruktor

Vid direkt anrop av Navigator.push med MaterialPageRoute överförs data via konstruktorn för målgående skärm. MethodChannel används inte — det är ren Dart-interaktion. Detta tillvägagångssätt är att föredra för typsäker överföring av komplexa objekt.

Exempel på att skapa en anpassad Route

Låt oss titta på ett exempel på att skapa en anpassad Route med egen animation och dataöverföring. PageRouteBuilder gör det möjligt att definiera in- och utträdesanimation med full kontroll över animationskurvan och varaktigheten.

// Anpassad Route med skjutanimation
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),
));

// Returnera data från skärm
ElevatedButton(
  onPressed: () => Navigator.of(context).pop({'selected': true, 'id': '42'}),
  child: const Text('Välj'),
);

// Hämta resultat på anropande skärm
final result = await Navigator.push(context, MaterialPageRoute(
  builder: (context) => const SelectionPage(),
));
if (result != null) {
  print('Valt: ${result['selected']}');
}

I exemplet definierar PageRouteBuilder en anpassad skjut-från-botten-animation med transparens. transitionDuration ställer in animationens hastighet. Koden visar också överföring av resultatet: detaljskärmen returnerar en Map med användarens val, och den anropande skärmen får dessa data via Future från push. Route säkerställer fullständig isolering: utkast på detaljskärmen påverkar inte listans tillstånd.