Route — co to je, typy a vytváření tras ve Flutter

Co je Route ve Flutter

Route — je základ navigačního systému Flutter. Každou obrazovku, kterou uživatel vidí v aplikaci, představuje objekt Route umístěný v zásobníku Navigator. Route abstrahuje obrazovku od řídícího kódu: Navigator přidává a odebírá Route a uvnitř Route se nachází rozhraní, které uživatel vidí. Taková architektura odděluje odpovědnost mezi navigací a zobrazením.

Na rozdíl od jednoduché výměny widgetů poskytuje Route služby nedostupné běžným widgetům: ModalBarrier (ztmavení pozadí při otevřeném dialogu), správu animace vstupu a výstupu, zpracování hardwarového tlačítka „Zpět“ na Androidu a integraci s Hero animací pro plynulé přechody mezi obrazovkami.

Podle Flutter Cookbook (2026) je Route klíčovým prvkem pro Hero animaci: widget Hero na jednom Route automaticky animuje přechod k widgetu Hero na dalším Route a vytváří efekt „letícího“ prvku. To je možné právě proto, že Route uchovává obě obrazovky v Overlay během animace.

Route jako stavební blok navigace

Route je základem jak pro jednoduché mobilní aplikace (přes Navigator 1.0), tak pro složité scénáře s hlubokými odkazy (Navigator 2.0). V Navigator 2.0 Route představuje Page, který RouterDelegate převádí z konfigurace trasy. Porozumění Route je tedy nezbytné pro práci s jakýmkoli navigačním systémem Flutter — bez ohledu na zvolený přístup nebo balíček.

Typy Route: MaterialPageRoute a CupertinoPageRoute

Flutter poskytuje několik vestavěných implementací Route, z nichž každá přizpůsobuje chování konkrétní platformě. Výběr správného typu Route ovlivňuje uživatelský zážitek: Material animace na Androidu a Cupertino animace na iOS vytvářejí pocit „nativní“ aplikace.

MaterialPageRoute: standard pro Android

MaterialPageRoute — nejčastěji používaná implementace Route. Animuje vstup nové obrazovky zdola nahoru s postupným zobrazováním. Při výstupu se obrazovka animuje shora dolů a vrací se do výchozí pozice. Panel nástrojů (AppBar) a tělo obrazovky se animují odděleně, což vytváří efekt hierarchie.

CupertinoPageRoute: styl navigace iOS

CupertinoPageRoute napodobuje UINavigationController z iOS. Nová obrazovka vstupuje zprava a zakrývá předchozí. Klíčová vlastnost — podpora interaktivního gesta posunu zpět, implementovaná přes CupertinoBackGestureDetector. Toto gesto je zpracováváno i uprostřed animace, což poskytuje přirozené chování známé uživatelům iPhone.

Životní cyklus Route: od vytvoření po zničení

Route má vlastní životní cyklus, který se liší od životního cyklu běžného StatefulWidget. Porozumění tomuto cyklu je nezbytné pro správnou inicializaci dat, přihlášení k odběru streamů a uvolnění zdrojů při zavírání obrazovky.

Fáze životního cyklu Route

Životní cyklus Route se skládá ze čtyř hlavních fází. Transition — Route je vytvořen a animován při vstupu (volá se didPush). Active — Route je plně zobrazen a interaguje s uživatelem. Inactive — jiný Route zakrývá aktuální (dialog, spodní obrazovka), ale Route zůstává v zásobníku. Disposed — Route je odstraněn ze zásobníku a zničen, volají se didPop a dispose.

Metody životního cyklu Route lze přepsat ve vlastní implementaci. Například didPop se volá, když je Route odstraněn ze zásobníku — zde lze uložit koncept dat. didChangeNext se volá, když se další Route v zásobníku změnil — užitečné pro aktualizaci UI při změně historie navigace.

Podle Flutter API Route.didPop (2026) je důležité nezaměňovat životní cyklus Route s životním cyklem State uvnitř Route. StatefulWidget uvnitř Route má vlastní initState a dispose, které se volají ve fázích Transition a Disposed. Route žije déle než jeho interní State — Route zůstává v Overlay, i když jsou jeho widgety dočasně skryty jiným Route.

Přenos dat přes Route mezi obrazovkami

Route poskytuje mechanismy pro přenos dat jak na vstupu (při vytvoření), tak na výstupu (při dokončení). Správný přenos dat přes Route eliminuje potřebu globálních proměnných a InheritedWidget, čímž činí navigaci typově bezpečnou a předvídatelnou.

Pro přenos dat na novou obrazovku se používá konstruktor přijímajícího widgetu nebo argument arguments v Navigator.pushNamed. Uvnitř Route jsou data přístupná přes RouteSettings.arguments, který je uložen v objektu Route. Tento přístup funguje pro všechny typy Route — MaterialPageRoute, CupertinoPageRoute a vlastní implementace.

Pro vrácení dat se používá druhý argument Navigator.pop(context, result). Navigator.push vrací Future, který se dokončí s hodnotou předanou v pop. Pokud je pop volán bez argumentu, Future se dokončí s null. Tento mechanismus je analogií startActivityForResult v Androidu a completion handleru v iOS, ale implementovaný přes Dart Futures.

Příklad přenosu dat přes konstruktor Route

Při přímém volání Navigator.push s MaterialPageRoute jsou data přenášena přes konstruktor cílové obrazovky. MethodChannel se nepoužívá — je to čistá Dart interakce. Tento přístup je preferován pro typově bezpečný přenos složitých objektů.

Příklad vytvoření vlastního Route

Podívejme se na příklad vytvoření vlastního Route s vlastní animací a přenosem dat. PageRouteBuilder umožňuje definovat animaci vstupu a výstupu s plnou kontrolou nad křivkou animace a dobou trvání.

// Vlastní Route s animací posunu
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),
));

// Vrátit data z obrazovky
ElevatedButton(
  onPressed: () => Navigator.of(context).pop({'selected': true, 'id': '42'}),
  child: const Text('Vybrat'),
);

// Získat výsledek na volající obrazovce
final result = await Navigator.push(context, MaterialPageRoute(
  builder: (context) => const SelectionPage(),
));
if (result != null) {
  print('Vybráno: ${result['selected']}');
}

V příkladu PageRouteBuilder definuje vlastní animaci posunu zdola s průhledností. transitionDuration nastavuje rychlost animace. Kód také demonstruje předávání výsledku: detailní obrazovka vrací Map s výběrem uživatele a volající obrazovka získává tato data přes Future z push. Route zajišťuje úplnou izolaci: koncepty na detailní obrazovce neovlivňují stav seznamu.