Route — mi ez, típusok és útvonalak létrehozása a Flutterben

Mi az a Route a Flutterben

Route — a Flutter navigációs rendszerének alapja. Minden képernyőt, amelyet a felhasználó az alkalmazásban lát, egy Route objektum képvisel a Navigator vermében. A Route elvonatkoztatja a képernyőt a vezérlő kódtól: a Navigator hozzáadja és eltávolítja a Route-ot, a Route-on belül pedig a felhasználó által látott felület található. Ez az architektúra szétválasztja a navigáció és a megjelenítés felelősségét.

Az egyszerű widgetcserétől eltérően a Route olyan szolgáltatásokat nyújt, amelyek a hagyományos widgetek számára nem elérhetők: ModalBarrier (a háttér elsötétítése nyitott dialógusablaknál), a belépési és kilépési animáció kezelése, a hardveres „Vissza” gomb feldolgozása Androidon és integráció a Hero animációval a zökkenőmentes képernyőátmenetekhez.

A Flutter Cookbook (2026) szerint a Route kulcsfontosságú elem a Hero animációhoz: a Hero widget az egyik Route-on automatikusan animálja az átmenetet a következő Route Hero widgetéhez, «repülő» elem hatást keltve. Ez azért lehetséges, mert a Route mindkét képernyőt az Overlay-ben tartja az animáció során.

A Route mint a navigáció építőköve

Route alapja mind az egyszerű mobilalkalmazásoknak (Navigator 1.0-n keresztül), mind a mélyhivatkozásos összetett forgatókönyveknek (Navigator 2.0). A Navigator 2.0-ban a Route egy Page-t képvisel, amelyet a RouterDelegate az útvonalkonfigurációból konvertál. Így a Route megértése elengedhetetlen bármely Flutter navigációs rendszerrel való munkához — függetlenül a választott megközelítéstől vagy csomagtól.

Route típusok: MaterialPageRoute és CupertinoPageRoute

Flutter számos beépített Route implementációt kínál, amelyek mindegyike egy adott platformra szabja a viselkedést. A megfelelő Route típus kiválasztása befolyásolja a felhasználói élményt: a Material animáció Androidon és a Cupertino animáció iOS-en egy «natív» alkalmazás érzetét kelti.

MaterialPageRoute: Android szabvány

MaterialPageRoute — a Route leggyakrabban használt implementációja. Animálja az új képernyő belépését alulról felfelé fokozatos megjelenéssel. Kilépéskor a képernyő felülről lefelé animálódik, visszatérve a kiinduló helyzetbe. Az eszköztár (AppBar) és a képernyő tartalma külön animálódik, hierarchia hatást keltve.

CupertinoPageRoute: iOS navigációs stílus

CupertinoPageRoute az iOS UINavigationController-ét utánozza. Az új képernyő jobbról érkezik, elfedve az előzőt. A kulcsjellemző — az interaktív visszahúzás gesztus támogatása, amely a CupertinoBackGestureDetector segítségével van implementálva. Ezt a gesztust még az animáció közepén is feldolgozzák, természetes viselkedést biztosítva, amely ismerős az iPhone felhasználók számára.

A Route életciklusa: létrehozástól megsemmisítésig

Route saját életciklussal rendelkezik, amely eltér a hagyományos StatefulWidget életciklusától. Ennek a ciklusnak a megértése elengedhetetlen az adatok helyes inicializálásához, folyamokra való feliratkozáshoz és erőforrások felszabadításához a képernyő bezárásakor.

A Route életciklusának fázisai

A Route életciklusa négy fő fázisból áll. Transition — a Route létrejön és animálódik belépéskor (didPush meghívódik). Active — a Route teljesen megjelenik és interakcióba lép a felhasználóval. Inactive — egy másik Route eltakarja a jelenlegit (dialógus, alsó képernyő), de a Route a veremben marad. Disposed — a Route eltávolításra kerül a veremből és megsemmisül, didPop és dispose meghívódik.

A Route életciklus metódusai felülírhatók egyéni implementációban. Például a didPop akkor hívódik meg, amikor a Route eltávolításra kerül a veremből — itt elmenthető az adatok vázlata. A didChangeNext akkor hívódik meg, amikor a következő Route a veremben megváltozott — hasznos a UI frissítéséhez a navigációs előzmények változásakor.

A Flutter API Route.didPop (2026) szerint fontos, hogy ne keverjük össze a Route életciklusát a Route-on belüli State életciklusával. A Route-on belüli StatefulWidget saját initState és dispose metódusokkal rendelkezik, amelyek a Transition és Disposed fázisokban hívódnak meg. A Route tovább él, mint a belső State — a Route az Overlay-ben marad még akkor is, amikor widgetjeit ideiglenesen elrejti egy másik Route.

Adatátvitel Route-on keresztül képernyők között

Route mechanizmusokat biztosít az adatátvitelhez mind belépéskor (létrehozáskor), mind kilépéskor (befejezéskor). A helyes adatátvitel Route-on keresztül kiküszöböli a globális változók és az InheritedWidget szükségességét, típusbiztossá és kiszámíthatóvá téve a navigációt.

Az adatok új képernyőre történő átviteléhez a fogadó widget konstruktorát vagy a arguments argumentumot használjuk a Navigator.pushNamed-ben. A Route-on belül az adatok a RouteSettings.arguments segítségével érhetők el, amely a Route objektumban tárolódik. Ez a megközelítés minden Route típusnál működik — MaterialPageRoute, CupertinoPageRoute és egyéni implementációk.

Az adatok visszaadásához a Navigator.pop(context, result) második argumentumát használjuk. A Navigator.push egy Future-t ad vissza, amely a pop-ban átadott értékkel fejeződik be. Ha a pop argumentum nélkül hívódik meg, a Future null-lal fejeződik be. Ez a mechanizmus az Android startActivityForResult és az iOS completion handler megfelelője, de Dart Futures segítségével implementálva.

Példa adatátvitelre a Route konstruktorán keresztül

A Navigator.push közvetlen meghívásakor MaterialPageRoute-val az adatok a célképernyő konstruktorán keresztül kerülnek átadásra. A MethodChannel nem használatos — ez tiszta Dart interakció. Ez a megközelítés előnyös az összetett objektumok típusbiztos átviteléhez.

Példa egyéni Route létrehozására

Vizsgáljunk meg egy példát egy egyéni Route létrehozására saját animációval és adatátvitellel. A PageRouteBuilder lehetővé teszi a belépési és kilépési animáció meghatározását teljes kontrollal az animációs görbe és időtartam felett.

// Egyéni Route csúsztató animációval
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),
));

// Adatok visszaadása a képernyőről
ElevatedButton(
  onPressed: () => Navigator.of(context).pop({'selected': true, 'id': '42'}),
  child: const Text('Kiválaszt'),
);

// Eredmény lekérése a hívó képernyőn
final result = await Navigator.push(context, MaterialPageRoute(
  builder: (context) => const SelectionPage(),
));
if (result != null) {
  print('Kiválasztva: ${result['selected']}');
}

A példában a PageRouteBuilder egyéni alulról csúsztató animációt határoz meg átlátszósággal. A transitionDuration beállítja az animáció sebességét. A kód az eredmény átadását is bemutatja: a részletképernyő egy Map-et ad vissza a felhasználó választásával, a hívó képernyő pedig ezeket az adatokat a push Future-jén keresztül kapja meg. A Route teljes elkülönítést biztosít: a részletképernyőn lévő vázlatok nem befolyásolják a lista állapotát.