Navigator: hantering av skärmar i Flutter

Vad är Navigator i Flutter

Navigator — är en widget som hanterar stacken av Route-objekt och implementerar skärmnavigering i en Flutter-app. Varje push-anrop placerar en ny Route överst i stacken, pop tar bort den översta Route och återgår till föregående skärm. MaterialApp skapar automatiskt en Navigator för hela appen och gör den tillgänglig via Navigator.of(context).

Till skillnad från StatefulWidget, där innehållsersättning sker via setState inom en enda widget, arbetar Navigator med hela skärmar med egen livscykel. Varje Route i stacken är ett isolerat tillstånd med egen BuildContext, vilket förhindrar minnesläckor och förenklar beroendehantering. Vid pop-anrop förstörs den oanvända Route och frigör resurser.

Enligt Flutter Navigation Guide (2026) har Navigator utvecklats från ett imperativt API (Navigator 1.0) till ett deklarativt (Navigator 2.0). Navigator 1.0 använder push/pop-metoderna direkt, vilket är bekvämt för enkla scenarier. Navigator 2.0 (Router) är lämplig för appar med djupa länkar, adaptiv navigering och webb-routing.

Hur Navigator fungerar under huven

Internt använder Navigator Overlay — en speciell widget som visar Route ovanpå varandra. Varje Route skapar sin egen position i Overlay med ett Z-index som motsvarar djupet i stacken. Detta förklarar varför vid push den nya skärmen animeras ovanför den föregående, och vid pop — den föregående skärmen är redan redo för visning: den förstördes inte, utan förblev i Overlay under den nya.

För övergångsanimationer använder Navigator PageTransitionsTheme, som kan skrivas över i ThemeData. Plattformsanimationer ställs in via CupertinoPageRoute för iOS (svep från höger) och MaterialPageRoute för Android (svep från botten). Navigator väljer automatiskt rätt animation när PlatformRoute används.

Navigator-metoder: push, pop och pushReplacement

Navigator tillhandahåller en uppsättning metoder för att hantera Route-stacken. Varje metod löser en specifik navigationsuppgift — från en enkel övergång till fullständig ersättning av skärmhistorik. Låt oss titta på huvudmetoderna med användningsexempel.

Push och Pop: grundläggande operationer

Metoden push tar emot en Route och returnerar ett Future med resultatet som skickas vid pop. Detta möjliggör mottagning av data från skärmen vi navigerade till. Till exempel kan en datumväljarskärm returnera DateTime via Navigator.pop(context, selectedDate). Metoden pop utan argument returnerar null, med argument — skickar värdet till den anropande skärmen.

PushReplacement: skärmersättning

pushReplacement ersätter den aktuella Route med en ny och tar bort den aktuella från stacken. Detta är avgörande i scenarier där användaren inte bör återgå till föregående skärm. Typiskt exempel — inloggningsskärm: efter lyckad inloggning ersätts den aktuella skärmen med huvudskärmen, och "Tillbaka"-knappen återgår inte till inloggningsformuläret.

Namngivna rutter och onGenerateRoute

Navigator stödjer navigering via namngivna rutter med metoden pushNamed. Istället för att direkt skapa en Route anger utvecklaren en textidentifierare, och Navigator skapar automatiskt en Route baserat på konfigurationen i MaterialApp. Detta förenklar koden och centraliserar rutdefinitionen på ett ställe.

Namngivna rutter definieras via egenskapen routes i MaterialApp, där varje nyckel är en sökvägssträng och värdet är en funktion som returnerar ett Widget. För dynamiska rutter (med parametrar) används onGenerateRoute — en callback som tar emot RouteSettings och returnerar en Route. Detta möjliggör överföring av argument via arguments och implementering av djup navigering.

Enligt Flutter Cookbook (2026) sker överföring av argument via pushNamed med parametern arguments: Object?. Den mottagande skärmen extraherar argument via ModalRoute.of(context)!.settings.arguments, vilket säkerställer typsäker dataöverföring utan globala variabler eller InheritedWidget.

Hantering av okända rutter

Egenskapen onUnknownRoute i MaterialApp hanterar fall där pushNamed anropas med en obefintlig rutt. Detta är användbart för att visa en 404-skärm eller omdirigera till startsidan. I kombination med onGenerateRoute säkerställer det full täckning av alla möjliga navigeringsscenarier.

Navigator 2.0 och deklarativ Router-navigering

Navigator 2.0 (även känt som Router API) — är ett deklarativt tillvägagångssätt för navigering, introducerat i Flutter 2.0. Till skillnad från imperativa Navigator 1.0, där utvecklaren anropar push/pop, hanterar Router navigering via tillstånd, och synkroniserar automatiskt webbläsarens URL med den aktuella skärmen. Detta är särskilt viktigt för webbappar och desktopversioner.

Arkitekturen för Navigator 2.0 består av tre nyckelkomponenter: RouteInformationParser tolkar URL:en till en rutkonfiguration, RouterDelegate omvandlar konfigurationen till en lista av Route, och BackButtonDispatcher hanterar systemets "Tillbaka"-knapp. Sådan arkitektur gör navigeringen helt förutsägbar och testbar.

För att förenkla arbetet med Navigator 2.0 finns wrapper-paket: go_router (rekommenderas av Google), auto_route och beamer. go_router tillhandahåller ett deklarativt DSL för att definiera rutter med stöd för kapslad navigering, omdirigeringar och djupa länkar utan manuell implementering av RouterDelegate. Enligt pub.dev (2026) används go_router i 35% av nya Flutter-projekt som föredrar det deklarativa tillvägagångssättet.

Exempel på navigering i Flutter-app

Låt oss titta på ett exempel på Navigator med namngivna rutter och dataöverföring mellan skärmar. Koden demonstrerar en produktlistningsskärm, övergång till detaljskärmen och återgång med resultat.

// Ruttkonfiguration i 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(),
    );
  },
)

// Navigering med dataöverföring
final result = await Navigator.pushNamed(
  context,
  '/product',
  arguments: 'product_42',
);

// Hämta data på mottagande skärm
final args = ModalRoute.of(context)!.settings.arguments as String;

// Ersätt skärm efter inloggning
Navigator.pushReplacementNamed(context, '/home');

// Rensa stack till huvudskärm
Navigator.pushNamedAndRemoveUntil(
  context,
  '/home',
  (route) => false,
);

I exemplet skickar Navigator.pushNamed produktidentifieraren till detaljskärmen. Vid återgång via Navigator.pop(context, updatedProduct) tar den anropande skärmen emot uppdaterad data i variabeln result. pushReplacementNamed ersätter den aktuella skärmen efter auktorisering, och pushNamedAndRemoveUntil med villkoret (route) => false rensar stacken helt, vilket förhindrar återgång till föregående skärmar.