Navigator: képernyők kezelése a Flutterben

Mi az a Navigator a Flutterben

Navigator — egy widget, amely a Route objektumok vermét kezeli és képernyő navigációt valósít meg a Flutter alkalmazásban. Minden push hívás egy új Route-ot helyez a verem tetejére, a pop eltávolítja a legfelső Route-ot és visszatér az előző képernyőre. A MaterialApp automatikusan létrehoz egy Navigatort a teljes alkalmazáshoz, elérhetővé téve azt a Navigator.of(context) segítségével.

Ellentétben a StatefulWidget-dzsal, ahol a tartalom cseréje setState révén történik egyetlen widgeten belül, a Navigator teljes képernyőkkel működik, saját életciklussal. Minden Route a veremben egy elkülönített állapot saját BuildContext-tel, ami megakadályozza a memóriaszivárgást és egyszerűsíti a függőségek kezelését. Pop híváskor a nem használt Route megsemmisül, felszabadítva az erőforrásokat.

A Flutter Navigation Guide (2026) szerint a Navigator az imperatív API-ból (Navigator 1.0) a deklaratív felé (Navigator 2.0) fejlődött. A Navigator 1.0 közvetlenül használja a push/pop metódusokat, ami egyszerű forgatókönyvekhez kényelmes. A Navigator 2.0 (Router) mély linkeket, adaptív navigációt és web útvonalválasztást igénylő alkalmazásokhoz alkalmas.

Hogyan működik a Navigator a motorháztető alatt

Belül a Navigator Overlay-t használ — egy speciális widgetet, amely egymás fölött jeleníti meg a Route-okat. Minden Route létrehozza a saját pozícióját az Overlay-ben egy Z-indexszel, ami megfelel a verembléli mélységnek. Ez megmagyarázza, miért animálódik push-nál az új képernyő az előző fölé, és pop-nál az előző képernyő már kész a megjelenítésre: nem semmisülték meg, csak az Overlay-ben maradt az új alatt.

Az átmeneti animációkhoz a Navigator a PageTransitionsTheme-et használja, ami felülírható a ThemeData-ban. A platform animációk a CupertinoPageRoute segítségével állíthatók be iOS-hez (jobbról csúsztás) és a MaterialPageRoute segítségével Androidhoz (alulról csúsztás). A Navigator automatikusan kiválasztja a megfelelő animációt a PlatformRoute használatakor.

Navigator metódusok: push, pop és pushReplacement

Navigator egy sor metódust kínál a Route verem kezeléséhez. Minden metódus egy adott navigációs feladatot old meg — az egyszerű átmenettől a képernyő-előzmények teljes cseréjéig. Nézzük meg a fő metódusokat használati példákkal.

Push és Pop: alapműveletek

A push metódus fogad egy Route-ot és visszaad egy Future-t a pop-nál átadott eredménnyel. Ez lehetővé teszi az adatok fogadását arról a képernyőről, amelyre navigáltunk. Például egy dátumválasztó képernyő visszaadhat DateTime-t a Navigator.pop(context, selectedDate) segítségével. A pop metódus argumentum nélkül null-t ad vissza, argumentummal — átadja az értéket a hívó képernyőnek.

PushReplacement: képernyő csere

pushReplacement lecseréli az aktuális Route-ot egy újra, eltávolítva az aktuálist a veremből. Ez kritikus azokban a forgatókönyvekben, ahol a felhasználó nem térhet vissza az előző képernyőre. Tipikus példa — bejelentkező képernyő: sikeres bejelentkezés után az aktuális képernyőt felváltja a fő képernyő, és a „Vissza” gomb nem tér vissza a bejelentkező űrlaphoz.

Elnevezett útvonalak és onGenerateRoute

Navigator támogatja a navigációt elnevezett útvonalakon a pushNamed metódus segítségével. A Route közvetlen létrehozása helyett a fejlesztő megad egy szöveges azonosítót, és a Navigator automatikusan létrehozza a Route-ot a MaterialApp konfigurációja alapján. Ez egyszerűsíti a kódot és központosítja az útvonalak definiálását egy helyre.

Az elnevezett útvonalakat a MaterialApp routes tulajdonságán keresztül definiáljuk, ahol minden kulcs egy útvonal sztring, és az érték egy Widget-et visszaadó függvény. Dinamikus útvonalakhoz (paraméterekkel) az onGenerateRoute használható — egy visszahívás, amely RouteSettings-et kap és Route-ot ad vissza. Ez lehetővé teszi argumentumok átadását az arguments segítségével és mély navigáció megvalósítását.

A Flutter Cookbook (2026) szerint az argumentumok átadása pushNamed segítségével az arguments: Object? paraméter segítségével történik. A fogadó képernyő az argumentumokat a ModalRoute.of(context)!.settings.arguments segítségével nyeri ki, ami típusbiztos adatátvitelt biztosít globális változók vagy InheritedWidget nélkül.

Ismeretlen útvonalak kezelése

A MaterialApp onUnknownRoute tulajdonsága kezeli azokat az eseteket, amikor a pushNamed nem létező útvonallal kerül meghívásra. Ez hasznos egy 404-es képernyő megjelenítéséhez vagy átirányításhoz a főoldalra. Az onGenerateRoute-dzsal kombinálva biztosítja az összes lehetséges navigációs forgatókönyv teljes lefedését.

Navigator 2.0 és deklaratív Router navigáció

Navigator 2.0 (még Router API-ként is ismert) — egy deklaratív megközelítés a navigációhoz, amelyet a Flutter 2.0-ban vezettek be. Ellentétben az imperatív Navigator 1.0-val, ahol a fejlesztő push/pop-ot hív, a Router állapoton keresztül kezeli a navigációt, automatikusan szinkronizálva a böngésző URL-jét az aktuális képernyővel. Ez különösen fontos webalkalmazások és asztali változatok esetén.

A Navigator 2.0 architektúrája három kulcsfontosságú összetevőből áll: a RouteInformationParser az URL-t útvonal-konfigurációvá elemzi, a RouterDelegate átalakítja a konfigurációt Route-ok listájává, a BackButtonDispatcher pedig kezeli a rendszer „Vissza” gombját. Ez az architektúrá teljesen kiszámíthatóvá és tesztelhetővé teszi a navigációt.

A Navigator 2.0-val való munka egyszerűsítésére léteznek csomagoló könyvtárak: go_router (a Google ajánlásával), auto_route és beamer. A go_router egy deklaratív DSL-t biztosít az útvonalak definiálásához, támogatva a beágyazott navigációt, átirányításokat és mély linkeket a RouterDelegate kézi megvalósítása nélkül. A pub.dev (2026) szerint a go_router-t az új Flutter projektek 35%-ában használják, amelyek a deklaratív megközelítést részesítik előnyben.

Navigációs példa Flutter alkalmazásban

Nézzünk egy példát a Navigator-ra elnevezett útvonalakkal és adatátvitellel a képernyők között. A kód bemutat egy terméklista képernyőt, átmenetet a részlet képernyőre és visszatérést az eredménnyel.

// Útvonal konfiguráció a MaterialApp-ban
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(),
    );
  },
)

// Navigáció adatátvitellel
final result = await Navigator.pushNamed(
  context,
  '/product',
  arguments: 'product_42',
);

// Adatok lekérése a fogadó képernyőn
final args = ModalRoute.of(context)!.settings.arguments as String;

// Képernyő cseréje bejelentkezés után
Navigator.pushReplacementNamed(context, '/home');

// Verem ürítése a fő képernyőig
Navigator.pushNamedAndRemoveUntil(
  context,
  '/home',
  (route) => false,
);

A példában a Navigator.pushNamed átadja a termékazonosítót a részlet képernyőnek. A Navigator.pop(context, updatedProduct) segítségével történő visszatéréskor a hívó képernyő megkapja a frissített adatokat a result változóban. A pushReplacementNamed lecseréli az aktuális képernyőt engedélyezés után, a pushNamedAndRemoveUntil pedig (route) => false feltétellel teljesen kiüríti a vermet, megakadályozva a visszatérést az előző képernyőkre.