Navigator: upravljanje ekranima u Flutteru

Šta je Navigator u Flutteru

Navigator — je vidžet koji upravlja stogom Route objekata i implementira ekransku navigaciju u Flutter aplikaciji. Svaki poziv push postavlja novi Route na vrh stoga, pop uklanja gornji Route i vraća se na prethodni ekran. MaterialApp automatski kreira Navigator za celu aplikaciju, čineći ga dostupnim kroz Navigator.of(context).

Za razliku od StatefulWidget, gde se zamena sadržaja dešava kroz setState unutar jednog vidžeta, Navigator operiše celim ekranima sa sopstvenim životnim ciklusom. Svaki Route u stogu je izolovano stanje sa sopstvenim BuildContext, što sprečava curenje memorije i pojednostavljuje upravljanje zavisnostima. Pri pozivu pop, neiskorišćeni Route se uništava, oslobađajući resurse.

Prema Flutter Navigation Guide (2026), Navigator je evoluirao od imperativnog API-ja (Navigator 1.0) do deklarativnog (Navigator 2.0). Navigator 1.0 koristi push/pop metode direktno, što je zgodno za jednostavne scenarije. Navigator 2.0 (Router) je pogodan za aplikacije sa dubokim linkovima, adaptivnom navigacijom i veb rutiranjem.

Kako Navigator radi ispod haube

Unutrašnje, Navigator koristi Overlay — specijalni vidžet koji prikazuje Route-ove jedan preko drugog. Svaki Route kreira svoju poziciju u Overlay-u sa Z-indeksom koji odgovara dubini u stogu. Ovo objašnjava zašto se pri push novi ekran animira iznad prethodnog, a pri pop — prethodni ekran je već spreman za prikaz: nije uništen, već je ostao u Overlay-u ispod novog.

Za animaciju prelaza, Navigator koristi PageTransitionsTheme, koji se može predefinisati u ThemeData. Platformne animacije se podešavaju kroz CupertinoPageRoute za iOS (prevlačenje s desna) i MaterialPageRoute za Android (prevlačenje odozdo). Navigator automatski bira ispravnu animaciju kada koristi PlatformRoute.

Metode Navigator: push, pop i pushReplacement

Navigator pruža skup metoda za upravljanje stogom Route. Svaka metoda rešava određeni zadatak navigacije — od jednostavnog prelaska do potpune zamene istorije ekrana. Razmotrimo glavne metode sa primerima upotrebe.

Push i Pop: osnovne operacije

Metoda push prihvata Route i vraća Future sa rezultatom prosleđenim pri pop. Ovo omogućava primanje podataka sa ekrana na koji smo prešli. Na primer, ekran za biranje datuma može vratiti DateTime kroz Navigator.pop(context, selectedDate). Metoda pop bez argumenta vraća null, sa argumentom — prosleđuje vrednost pozivajućem ekranu.

PushReplacement: zamena ekrana

pushReplacement zamenjuje trenutni Route novim, uklanjajući trenutni iz stoga. Ovo je ključno u scenarijima gde korisnik ne treba da se vrati na prethodni ekran. Tipičan primer — ekran prijave: nakon uspešne prijave, trenutni ekran se zamenjuje glavnim, a dugme „Nazad” se ne vraća na formular za prijavu.

Imenovane rute i onGenerateRoute

Navigator podržava navigaciju po imenovanim rutama kroz metod pushNamed. Umesto direktnog kreiranja Route, programer navodi tekstualni identifikator, a Navigator automatski kreira Route na osnovu konfiguracije u MaterialApp. Ovo pojednostavljuje kod i centralizuje definisanje ruta na jednom mestu.

Imenovane rute se definišu kroz svojstvo routes u MaterialApp, gde je svaki ključ putanja, a vrednost funkcija koja vraća Widget. Za dinamičke rute (sa parametrima) koristi se onGenerateRoute — callback koji prima RouteSettings i vraća Route. Ovo omogućava prosleđivanje argumenata kroz arguments i implementaciju duboke navigacije.

Prema Flutter Cookbook (2026), prosleđivanje argumenata kroz pushNamed se vrši pomoću parametra arguments: Object?. Prijemni ekran izvlači argumente kroz ModalRoute.of(context)!.settings.arguments, što obezbeđuje tipski bezbedan prenos podataka bez globalnih promenljivih ili InheritedWidget.

Obrada nepoznatih ruta

Svojstvo onUnknownRoute u MaterialApp obrađuje slučajeve kada je pushNamed pozvan sa nepostojećom rutom. Ovo je korisno za prikazivanje ekrana 404 ili preusmeravanje na glavnu stranicu. U kombinaciji sa onGenerateRoute, obezbeđuje potpuno pokrivanje svih mogućih navigacionih scenarija.

Navigator 2.0 i deklarativna navigacija Router

Navigator 2.0 (takođe poznat kao Router API) — je deklarativni pristup navigaciji, uveden u Flutter 2.0. Za razliku od imperativnog Navigator 1.0, gde programer poziva push/pop, Router upravlja navigacijom kroz stanje, automatski sinhronizujući URL pregledača sa trenutnim ekranom. Ovo je posebno važno za veb aplikacije i desktop verzije.

Arhitektura Navigator 2.0 sastoji se od tri ključne komponente: RouteInformationParser parsira URL u konfiguraciju rute, RouterDelegate pretvara konfiguraciju u listu Route, a BackButtonDispatcher obrađuje sistemsko dugme „Nazad”. Takva arhitektura čini navigaciju potpuno predvidljivom i testabilnom.

Za pojednostavljenje rada sa Navigator 2.0 postoje wrapper paketi: go_router (preporučen od Google-a), auto_route i beamer. go_router pruža deklarativni DSL za definisanje ruta sa podrškom za ugnežđenu navigaciju, preusmeravanja i duboke linkove bez ručne implementacije RouterDelegate. Prema pub.dev (2026), go_router se koristi u 35% novih Flutter projekata koji preferiraju deklarativni pristup.

Primer navigacije u Flutter aplikaciji

Razmotrimo primer Navigator-a sa imenovanim rutama i prenosom podataka između ekrana. Kod demonstrira ekran liste proizvoda, prelazak na ekran detalja i povratak sa rezultatom.

// Konfiguracija ruta u 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(),
    );
  },
)

// Navigacija sa prenosom podataka
final result = await Navigator.pushNamed(
  context,
  '/product',
  arguments: 'product_42',
);

// Dobijanje podataka na prijemnom ekranu
final args = ModalRoute.of(context)!.settings.arguments as String;

// Zameni ekran nakon prijave
Navigator.pushReplacementNamed(context, '/home');

// Očisti stog do glavnog ekrana
Navigator.pushNamedAndRemoveUntil(
  context,
  '/home',
  (route) => false,
);

U primeru, Navigator.pushNamed prosleđuje identifikator proizvoda ekranu detalja. Pri povratku kroz Navigator.pop(context, updatedProduct), pozivajući ekran dobija ažurirane podatke u promenljivoj result. pushReplacementNamed zamenjuje trenutni ekran nakon autorizacije, a pushNamedAndRemoveUntil sa uslovom (route) => false potpuno čisti stog, sprečavajući povratak na prethodne ekrane.