Navigator: gestionarea ecranelor în Flutter

Ce este Navigator în Flutter

Navigator — este un widget care gestionează stiva de obiecte Route și implementează navigația pe ecrane în aplicația Flutter. Fiecare apel push plasează un nou Route în vârful stivei, pop înlătură Route-ul de sus și revine la ecranul anterior. MaterialApp creează automat un Navigator pentru întreaga aplicație, făcându-l accesibil prin Navigator.of(context).

Spre deosebire de StatefulWidget, unde înlocuirea conținutului are loc prin setState în interiorul unui singur widget, Navigator operează pe ecrane întregi cu propriul ciclu de viață. Fiecare Route din stivă este o stare izolată cu propriul BuildContext, ceea ce previne scurgerile de memorie și simplifică gestionarea dependențelor. La apelul pop, Route-ul neutilizat este distrus, eliberând resurse.

Conform Flutter Navigation Guide (2026), Navigator a evoluat de la API imperativ (Navigator 1.0) la API declarativ (Navigator 2.0). Navigator 1.0 folosește metodele push/pop direct, ceea ce este convenabil pentru scenarii simple. Navigator 2.0 (Router) este potrivit pentru aplicații cu linkuri profunde, navigație adaptivă și rutare web.

Cum funcționează Navigator în interior

În interior, Navigator folosește Overlay — un widget special care afișează Route-urile unul peste altul. Fiecare Route își creează propria poziție în Overlay cu un indice Z corespunzător adâncimii în stivă. Aceasta explică de ce la push noul ecran este animat deasupra celui anterior, iar la pop — ecranul anterior este deja gata de afișare: nu a fost distrus, ci a rămas în Overlay sub cel nou.

Pentru animații de tranziție, Navigator folosește PageTransitionsTheme, care poate fi suprascris în ThemeData. Animațiile specifice platformei sunt setate prin CupertinoPageRoute pentru iOS (glisare din dreapta) și MaterialPageRoute pentru Android (glisare de jos). Navigator selectează automat animația corectă atunci când folosește PlatformRoute.

Metodele Navigator: push, pop și pushReplacement

Navigator oferă un set de metode pentru gestionarea stivei Route. Fiecare metodă rezolvă o sarcină specifică de navigație — de la o simplă tranziție până la înlocuirea completă a istoricului ecranelor. Să analizăm principalele metode cu exemple de utilizare.

Push și Pop: operații de bază

Metoda push primește un Route și returnează un Future cu rezultatul transmis la pop. Aceasta permite primirea datelor de pe ecranul pe care am navigat. De exemplu, un ecran de selectare a datei poate returna DateTime prin Navigator.pop(context, selectedDate). Metoda pop fără argument returnează null, iar cu argument — transmite valoarea ecranului apelant.

PushReplacement: înlocuirea ecranului

pushReplacement înlocuiește Route-ul curent cu unul nou, eliminându-l pe cel curent din stivă. Acest lucru este esențial în scenariile în care utilizatorul nu ar trebui să revină la ecranul anterior. Un exemplu tipic — ecranul de autentificare: după conectarea cu succes, ecranul curent este înlocuit cu cel principal, iar butonul „Înapoi” nu revine la formularul de autentificare.

Rute denumite și onGenerateRoute

Navigator suportă navigația pe rute denumite prin metoda pushNamed. În loc să creeze Direct un Route, dezvoltatorul specifică un identificator text, iar Navigator creează automat Route-ul pe baza configurației din MaterialApp. Aceasta simplifică codul și centralizează definirea rutelor într-un singur loc.

Rutele denumite se definesc prin proprietatea routes din MaterialApp, unde fiecare cheie este o cale text, iar valoarea este o funcție care returnează un Widget. Pentru rute dinamice (cu parametri) se folosește onGenerateRoute — un callback care primește RouteSettings și returnează un Route. Aceasta permite transmiterea argumentelor prin arguments și implementarea navigației profunde.

Conform Flutter Cookbook (2026), transmiterea argumentelor prin pushNamed se realizează cu parametrul arguments: Object?. Ecranul receptor extrage argumentele prin ModalRoute.of(context)!.settings.arguments, ceea ce asigură o transmitere sigură a datelor fără variabile globale sau InheritedWidget.

Gestionarea rutelor necunoscute

Proprietatea onUnknownRoute din MaterialApp gestionează cazurile când pushNamed este apelat cu o rută inexistentă. Acest lucru este util pentru afișarea unui ecran 404 sau redirecționarea către pagina principală. În combinație cu onGenerateRoute, asigură o acoperire completă a tuturor scenariilor posibile de navigație.

Navigator 2.0 și navigația declarativă Router

Navigator 2.0 (cunoscut și ca Router API) — este o abordare declarativă a navigației, introdusă în Flutter 2.0. Spre deosebire de Navigator 1.0 imperativ, unde dezvoltatorul apelează push/pop, Router gestionează navigația prin stare, sincronizând automat URL-ul browserului cu ecranul curent. Acest lucru este deosebit de important pentru aplicații web și versiuni desktop.

Arhitectura Navigator 2.0 constă din trei componente cheie: RouteInformationParser parsează URL-ul într-o configurație de rută, RouterDelegate transformă configurația într-o listă de Route-uri, iar BackButtonDispatcher gestionează butonul de sistem „Înapoi”. O astfel de arhitectură face navigația complet predictibilă și testabilă.

Pentru simplificarea lucrului cu Navigator 2.0 există pachete wrapper: go_router (recomandat de Google), auto_route și beamer. go_router oferă un DSL declarativ pentru definirea rutelor cu suport pentru navigație imbricată, redirecționări și linkuri profunde fără implementarea manuală a RouterDelegate. Conform pub.dev (2026), go_router este folosit în 35% din noile proiecte Flutter care preferă abordarea declarativă.

Exemplu de navigație în aplicația Flutter

Să analizăm un exemplu Navigator cu rute denumite și transmitere de date între ecrane. Codul demonstrează un ecran de listă de produse, tranziția la ecranul de detalii și revenirea cu rezultat.

// Configurarea rutelor în 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(),
    );
  },
)

// Navigație cu transmitere de date
final result = await Navigator.pushNamed(
  context,
  '/product',
  arguments: 'product_42',
);

// Obținerea datelor pe ecranul receptor
final args = ModalRoute.of(context)!.settings.arguments as String;

// Înlocuiește ecranul după autentificare
Navigator.pushReplacementNamed(context, '/home');

// Curăță stiva până la ecranul principal
Navigator.pushNamedAndRemoveUntil(
  context,
  '/home',
  (route) => false,
);

În exemplu, Navigator.pushNamed transmite identificatorul produsului către ecranul de detalii. La revenirea prin Navigator.pop(context, updatedProduct), ecranul apelant primește datele actualizate în variabila result. pushReplacementNamed înlocuiește ecranul curent după autorizare, iar pushNamedAndRemoveUntil cu condiția (route) => false curăță complet stiva, prevenind revenirea la ecranele anterioare.