Route — ce este, tipuri și crearea rutelor în Flutter

Ce este Route în Flutter

Route — este baza sistemului de navigare Flutter. Fiecare ecran pe care utilizatorul îl vede în aplicație este reprezentat de un obiect Route aflat în stiva Navigator. Route abstrage ecranul de codul de gestionare: Navigator adaugă și elimină Route, iar în interiorul Route se află interfața pe care o vede utilizatorul. Această arhitectură separă responsabilitatea între navigare și afișare.

Spre deosebire de simpla înlocuire a widgeturilor, Route oferă servicii indisponibile widgeturilor obișnuite: ModalBarrier (întunecarea fundalului la deschiderea unui dialog), gestionarea animației de intrare și ieșire, procesarea butonului hardware „Înapoi” pe Android și integrarea cu animația Hero pentru tranziții fluide între ecrane.

Conform Flutter Cookbook (2026), Route este un element cheie pentru animația Hero: widgetul Hero pe un Route animează automat tranziția către widgetul Hero pe următorul Route, creând efectul unui element „zburător”. Acest lucru este posibil tocmai pentru că Route păstrează ambele ecrane în Overlay în timpul animației.

Route ca bloc de construcție al navigării

Route este fundamentul atât pentru aplicațiile mobile simple (prin Navigator 1.0), cât și pentru scenarii complexe cu linkuri adânci (Navigator 2.0). În Navigator 2.0, Route reprezintă un Page pe care RouterDelegate îl convertește din configurația rutei. Astfel, înțelegerea Route este necesară pentru lucrul cu orice sistem de navigare Flutter — indiferent de abordarea sau pachetul ales.

Tipuri de Route: MaterialPageRoute și CupertinoPageRoute

Flutter oferă mai multe implementări încorporate ale Route, fiecare adaptând comportamentul pentru o platformă specifică. Alegerea tipului corect de Route influențează experiența utilizatorului: animația Material pe Android și animația Cupertino pe iOS creează senzația unei aplicații „native”.

MaterialPageRoute: standard pentru Android

MaterialPageRoute — cea mai frecvent utilizată implementare Route. Animează intrarea unui nou ecran de jos în sus cu apariție treptată. La ieșire, ecranul se animează de sus în jos, revenind la poziția inițială. Bara de instrumente (AppBar) și corpul ecranului se animează separat, creând un efect de ierarhie.

CupertinoPageRoute: stil de navigare iOS

CupertinoPageRoute imită UINavigationController din iOS. Noul ecran intră din dreapta, acoperindu-l pe cel anterior. Caracteristica cheie — suportul pentru gestul interactiv de glisare înapoi, implementat prin CupertinoBackGestureDetector. Acest gest este procesat chiar și în mijlocul animației, asigurând un comportament natural familiar utilizatorilor iPhone.

Ciclul de viață al Route: de la creare la distrugere

Route are propriul ciclu de viață care diferă de ciclul de viață al unui StatefulWidget obișnuit. Înțelegerea acestui ciclu este necesară pentru inițializarea corectă a datelor, abonarea la streamuri și eliberarea resurselor la închiderea ecranului.

Etapele ciclului de viață al Route

Ciclul de viață al Route constă din patru etape principale. Transition — Route este creat și animat la intrare (se apelează didPush). Active — Route este afișat complet și interacționează cu utilizatorul. Inactive — un alt Route acoperă cel curent (dialog, ecran inferior), dar Route rămâne în stivă. Disposed — Route este eliminat din stivă și distrus, se apelează didPop și dispose.

Metodele ciclului de viață ale Route pot fi suprascrise într-o implementare personalizată. De exemplu, didPop este apelat când Route este eliminat din stivă — aici se poate salva o ciornă de date. didChangeNext este apelat când următorul Route din stivă s-a schimbat — util pentru actualizarea UI la modificarea istoricului de navigare.

Conform Flutter API Route.didPop (2026), este important să nu confundăm ciclul de viață al Route cu ciclul de viață al State-ului din interiorul Route. StatefulWidget din interiorul Route are propriile initState și dispose care sunt apelate în etapele Transition și, respectiv, Disposed. Route trăiește mai mult decât State-ul său intern — Route rămâne în Overlay chiar și atunci când widgeturile sale sunt temporar ascunse de un alt Route.

Transmiterea datelor prin Route între ecrane

Route oferă mecanisme pentru transmiterea datelor atât la intrare (la creare), cât și la ieșire (la finalizare). Transmiterea corectă a datelor prin Route elimină necesitatea variabilelor globale și a InheritedWidget, făcând navigarea tip-sigură și predictibilă.

Pentru transmiterea datelor către un nou ecran se folosește constructorul widgetului destinatar sau argumentul arguments în Navigator.pushNamed. În interiorul Route, datele sunt accesibile prin RouteSettings.arguments care este stocat în obiectul Route. Această abordare funcționează pentru toate tipurile de Route — MaterialPageRoute, CupertinoPageRoute și implementări personalizate.

Pentru returnarea datelor se folosește al doilea argument Navigator.pop(context, result). Navigator.push returnează un Future care se completează cu valoarea transmisă în pop. Dacă pop este apelat fără argument, Future se completează cu null. Acest mecanism este analogul startActivityForResult din Android și completion handler din iOS, dar implementat prin Dart Futures.

Exemplu de transmitere a datelor prin constructorul Route

La apelul direct Navigator.push cu MaterialPageRoute, datele sunt transmise prin constructorul ecranului țintă. MethodChannel nu este folosit — este o interacțiune pură Dart. Această abordare este preferată pentru transmiterea tip-sigură a obiectelor complexe.

Exemplu de creare a unui Route personalizat

Să examinăm un exemplu de creare a unui Route personalizat cu animație proprie și transmitere de date. PageRouteBuilder permite definirea animației de intrare și ieșire cu control complet asupra curbei de animație și duratei.

// Route personalizat cu animație de derulare
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),
));

// Returnează datele din ecran
ElevatedButton(
  onPressed: () => Navigator.of(context).pop({'selected': true, 'id': '42'}),
  child: const Text('Selectează'),
);

// Obține rezultatul pe ecranul apelant
final result = await Navigator.push(context, MaterialPageRoute(
  builder: (context) => const SelectionPage(),
));
if (result != null) {
  print('Selectat: ${result['selected']}');
}

În exemplu, PageRouteBuilder definește o animație personalizată de derulare de jos cu transparență. transitionDuration stabilește viteza animației. Codul demonstrează și transmiterea rezultatului: ecranul de detalii returnează un Map cu alegerea utilizatorului, iar ecranul apelant primește aceste date prin Future de la push. Route asigură izolarea completă: ciornele de pe ecranul de detalii nu afectează starea listei.