Navigator: správa obrazovek ve Flutter

Co je Navigator ve Flutter

Navigator — je widget, který spravuje zásobník objektů Route a implementuje navigaci obrazovek ve Flutter aplikaci. Každé volání push umístí nový Route na vrchol zásobníku, pop odstraní vrchní Route a vrátí se na předchozí obrazovku. MaterialApp automaticky vytváří Navigator pro celou aplikaci a zpřístupňuje jej pomocí Navigator.of(context).

Na rozdíl od StatefulWidget, kde k nahrazení obsahu dochází pomocí setState uvnitř jednoho widgetu, Navigator pracuje s celými obrazovkami s vlastním životním cyklem. Každý Route v zásobníku je izolovaný stav s vlastním BuildContext, což zabraňuje únikům paměti a zjednodušuje správu závislostí. Při volání pop je nepoužívaný Route zničen a uvolňuje zdroje.

Podle Flutter Navigation Guide (2026), Navigator se vyvinul z imperativního API (Navigator 1.0) na deklarativní (Navigator 2.0). Navigator 1.0 používá metody push/pop přímo, což je vhodné pro jednoduché scénáře. Navigator 2.0 (Router) je vhodný pro aplikace s hlubokými odkazy, adaptivní navigací a webovým směrováním.

Jak Navigator funguje pod kapotou

Uvnitř Navigator používá Overlay — speciální widget, který zobrazuje Route jeden přes druhý. Každý Route vytváří svou vlastní pozici v Overlay s Z-indexem odpovídajícím hloubce v zásobníku. To vysvětluje, proč se při push nová obrazovka animuje nad předchozí, a při pop — předchozí obrazovka je již připravena k zobrazení: nebyla zničena, pouze zůstala v Overlay pod novou.

Pro animace přechodů Navigator používá PageTransitionsTheme, který lze přepsat v ThemeData. Platformní animace se nastavují pomocí CupertinoPageRoute pro iOS (posun zprava) a MaterialPageRoute pro Android (posun zdola). Navigator automaticky vybírá správnou animaci při použití PlatformRoute.

Metody Navigator: push, pop a pushReplacement

Navigator poskytuje sadu metod pro správu zásobníku Route. Každá metoda řeší konkrétní úkol navigace — od jednoduchého přechodu až po úplné nahrazení historie obrazovek. Podívejme se na hlavní metody s příklady použití.

Scénář použití

Push a Pop: základní operace

Metoda push přijímá Route a vrací Future s výsledkem předaným při pop. To umožňuje přijímat data z obrazovky, na kterou jsme přešli. Například obrazovka výběru data může vrátit DateTime pomocí Navigator.pop(context, selectedDate). Metoda pop bez argumentu vrací null, s argumentem — předává hodnotu volající obrazovce.

PushReplacement: nahrazení obrazovky

pushReplacement nahrazuje aktuální Route novým, odstraňujíc aktuální ze zásobníku. To je klíčové ve scénářích, kde by se uživatel neměl vracet na předchozí obrazovku. Typický příklad — přihlašovací obrazovka: po úspěšném přihlášení je aktuální obrazovka nahrazena hlavní a tlačítko „Zpět" se nevrací k přihlašovacímu formuláři.

Pojmenované trasy a onGenerateRoute

Navigator podporuje navigaci po pojmenovaných trasách pomocí metody pushNamed. Místo přímého vytváření Route vývojář zadá textový identifikátor a Navigator automaticky vytvoří Route na základě konfigurace v MaterialApp. To zjednodušuje kód a centralizuje definici tras na jedno místo.

Pojmenované trasy se definují pomocí vlastnosti routes v MaterialApp, kde každý klíč je řetězec cesty a hodnota je funkce vracející Widget. Pro dynamické trasy (s parametry) se používá onGenerateRoute — callback, který přijímá RouteSettings a vrací Route. To umožňuje předávání argumentů přes arguments a implementaci hluboké navigace.

Podle Flutter Cookbook (2026), předávání argumentů přes pushNamed se provádí pomocí parametru arguments: Object?. Přijímající obrazovka extrahuje argumenty přes ModalRoute.of(context)!.settings.arguments, což zajišťuje typově bezpečný přenos dat bez globálních proměnných nebo InheritedWidget.

Zpracování neznámých tras

Vlastnost onUnknownRoute v MaterialApp zpracovává případy, kdy je pushNamed volán s neexistující trasou. To je užitečné pro zobrazení obrazovky 404 nebo přesměrování na hlavní stránku. V kombinaci s onGenerateRoute zajišťuje úplné pokrytí všech možných navigačních scénářů.

Navigator 2.0 a deklarativní navigace Router

Navigator 2.0 (známý také jako Router API) — je deklarativní přístup k navigaci, představený ve Flutter 2.0. Na rozdíl od imperativního Navigator 1.0, kde vývojář volá push/pop, Router spravuje navigaci pomocí stavu, automaticky synchronizuje URL prohlížeče s aktuální obrazovkou. To je zvláště důležité pro webové aplikace a desktopové verze.

Architektura Navigator 2.0 se skládá ze tří klíčových komponent: RouteInformationParser parsuje URL do konfigurace trasy, RouterDelegate převádí konfiguraci na seznam Route, a BackButtonDispatcher zpracovává systémové tlačítko „Zpět". Taková architektura činí navigaci zcela předvídatelnou a testovatelnou.

Pro zjednodušení práce s Navigator 2.0 existují wrapper balíčky: go_router (doporučený Googlem), auto_route a beamer. go_router poskytuje deklarativní DSL pro definici tras s podporou vnořené navigace, přesměrování a hlubokých odkazů bez ruční implementace RouterDelegate. Podle pub.dev (2026), go_router se používá ve 35% nových Flutter projektů, které preferují deklarativní přístup.

Příklad navigace ve Flutter aplikaci

Podívejme se na příklad Navigator s pojmenovanými trasami a přenosem dat mezi obrazovkami. Kód demonstruje obrazovku seznamu produktů, přechod na detailní obrazovku a návrat s výsledkem.

// Konfigurace tras v 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(),
    );
  },
)

// Navigace s předáváním dat
final result = await Navigator.pushNamed(
  context,
  '/product',
  arguments: 'product_42',
);

// Získání dat na přijímající obrazovce
final args = ModalRoute.of(context)!.settings.arguments as String;

// Nahraď obrazovku po přihlášení
Navigator.pushReplacementNamed(context, '/home');

// Vymaž zásobník na hlavní obrazovku
Navigator.pushNamedAndRemoveUntil(
  context,
  '/home',
  (route) => false,
);

V příkladu Navigator.pushNamed předává identifikátor produktu detailní obrazovce. Při návratu přes Navigator.pop(context, updatedProduct) volající obrazovka obdrží aktualizovaná data v proměnné result. pushReplacementNamed nahrazuje aktuální obrazovku po autorizaci a pushNamedAndRemoveUntil s podmínkou (route) => false zcela vymaže zásobník a zabrání návratu na předchozí obrazovky.