Navigator: pamamahala ng mga screen sa Flutter

Ano ang Navigator sa Flutter

Navigator — ay isang widget na namamahala sa stack ng mga object na Route at nagpapatupad ng screen nabigasyon sa Flutter app. Bawat tawag ng push ay naglalagay ng bagong Route sa tuktok ng stack, inaalis ng pop ang pinakataas na Route at bumabalik sa nakaraang screen. Awtomatikong gumagawa ang MaterialApp ng Navigator para sa buong app, na ginagawa itong naa-access sa pamamagitan ng Navigator.of(context).

Hindi tulad ng StatefulWidget, kung saan ang pagpapalit ng nilalaman ay nangyayari sa pamamagitan ng setState sa loob ng isang widget, ang Navigator ay nag-ooperate sa buong screen na may sariling lifecycle. Bawat Route sa stack ay isang nakahiwalay na estado na may sariling BuildContext, na pumipigil sa pagtagas ng memory at pinapasimple ang pamamahala ng dependencies. Kapag tinawag ang pop, ang hindi ginagamit na Route ay sinisira, nagpapalaya ng mga resources.

Ayon sa Flutter Navigation Guide (2026), ang Navigator ay nag-evolve mula sa imperative API (Navigator 1.0) patungo sa deklaratibo (Navigator 2.0). Ang Navigator 1.0 ay gumagamit ng push/pop na mga pamamaraan nang direkta, na maginhawa para sa mga simpleng senaryo. Ang Navigator 2.0 (Router) ay angkop para sa mga app na may malalalim na link, adaptive na nabigasyon at web routing.

Paano gumagana ang Navigator sa loob

Sa loob, ang Navigator ay gumagamit ng Overlay — isang espesyal na widget na nagpapakita ng mga Route nang magkakapatong. Bawat Route ay lumilikha ng sarili nitong posisyon sa Overlay na may Z-index na tumutugma sa lalim sa stack. Ipinapaliwanag nito kung bakit sa push ang bagong screen ay na-animate sa ibabaw ng nauna, at sa pop — ang nakaraang screen ay handa nang ipakita: hindi ito nasira, nanatili lamang ito sa Overlay sa ilalim ng bago.

Para sa mga animation ng transition, ang Navigator ay gumagamit ng PageTransitionsTheme, na maaaring overwrite sa ThemeData. Ang mga platform animation ay itinakda sa pamamagitan ng CupertinoPageRoute para sa iOS (slide mula kanan) at MaterialPageRoute para sa Android (slide mula sa ibaba). Awtomatikong pinipili ng Navigator ang tamang animation kapag gumagamit ng PlatformRoute.

Mga pamamaraan ng Navigator: push, pop at pushReplacement

Navigator ay nagbibigay ng isang set ng mga pamamaraan para sa pamamahala ng Route stack. Bawat pamamaraan ay lumulutas ng isang partikular na gawain ng nabigasyon — mula sa simpleng transition hanggang sa kumpletong pagpapalit ng kasaysayan ng screen. Tingnan natin ang mga pangunahing pamamaraan na may mga halimbawa ng paggamit.

Push at Pop: mga pangunahing operasyon

Ang pamamaraang push ay tumatanggap ng Route at nagbabalik ng Future na may resulta na ipinasa sa pop. Ito ay nagpapahintulot sa pagtanggap ng data mula sa screen na pinuntahan namin. Halimbawa, ang isang screen ng pagpili ng petsa ay maaaring magbalik ng DateTime sa pamamagitan ng Navigator.pop(context, selectedDate). Ang pamamaraang pop na walang argumento ay nagbabalik ng null, na may argumento — ipinapasa ang halaga sa tumatawag na screen.

PushReplacement: pagpapalit ng screen

pushReplacement ay pinapalitan ang kasalukuyang Route ng bago, inaalis ang kasalukuyan mula sa stack. Ito ay mahalaga sa mga senaryo kung saan ang gumagamit ay hindi dapat bumalik sa nakaraang screen. Karaniwang halimbawa — login screen: pagkatapos ng matagumpay na pag-login, ang kasalukuyang screen ay pinalitan ng main screen, at ang button na “Bumalik” ay hindi bumabalik sa login form.

Pinangalanang ruta at onGenerateRoute

Navigator ay sumusuporta sa nabigasyon sa pamamagitan ng pinangalanang ruta gamit ang pamamaraang pushNamed. Sa halip na direktang lumikha ng Route, ang developer ay tumutukoy ng isang text identifier, at awtomatikong lumilikha ang Navigator ng Route batay sa configuration sa MaterialApp. Pinapasimple nito ang code at isinasentro ang kahulugan ng ruta sa isang lugar.

Ang pinangalanang ruta ay tinukoy sa pamamagitan ng property na routes sa MaterialApp, kung saan ang bawat key ay isang path string at ang value ay isang function na nagbabalik ng Widget. Para sa mga dynamic na ruta (na may parameter), ginagamit ang onGenerateRoute — isang callback na tumatanggap ng RouteSettings at nagbabalik ng Route. Ito ay nagpapahintulot sa pagpasa ng mga argumento sa pamamagitan ng arguments at pagpapatupad ng malalim na nabigasyon.

Ayon sa Flutter Cookbook (2026), ang pagpasa ng argumento sa pamamagitan ng pushNamed ay ginagawa gamit ang parameter na arguments: Object?. Kinukuha ng tumatanggap na screen ang mga argumento sa pamamagitan ng ModalRoute.of(context)!.settings.arguments, na tinitiyak ang ligtas na paglipat ng data nang walang global variables o InheritedWidget.

Pangangasiwa ng hindi kilalang ruta

Ang property na onUnknownRoute sa MaterialApp ay humahawak ng mga kaso kung saan ang pushNamed ay tinawag na may hindi umiiral na ruta. Ito ay kapaki-pakinabang para sa pagpapakita ng 404 screen o pag-redirect sa pangunahing pahina. Sa kombinasyon sa onGenerateRoute, tinitiyak nito ang kumpletong coverage ng lahat ng posibleng senaryo ng nabigasyon.

Navigator 2.0 at deklaratibong Router nabigasyon

Navigator 2.0 (kilala rin bilang Router API) — ay isang deklaratibong approach sa nabigasyon, na ipinakilala sa Flutter 2.0. Hindi tulad ng imperative Navigator 1.0 kung saan ang developer ay tumatawag ng push/pop, ang Router ay namamahala ng nabigasyon sa pamamagitan ng estado, awtomatikong nagsi-sync ng browser URL sa kasalukuyang screen. Ito ay lalong mahalaga para sa mga web app at desktop versions.

Ang arkitektura ng Navigator 2.0 ay binubuo ng tatlong pangunahing bahagi: RouteInformationParser ay nag-parse ng URL sa configuration ng ruta, RouterDelegate ay nagko-convert ng configuration sa listahan ng Route, at BackButtonDispatcher ay humahawak ng system button na “Bumalik”. Ang ganitong arkitektura ay ginagawang ganap na predictable at testable ang nabigasyon.

Para pasimplehin ang pagtatrabaho sa Navigator 2.0, may mga wrapper package: go_router (inirerekomenda ng Google), auto_route at beamer. Ang go_router ay nagbibigay ng deklaratibong DSL para sa pagtukoy ng ruta na may suporta para sa nested nabigasyon, redirects at malalalim na link nang walang manual implementation ng RouterDelegate. Ayon sa pub.dev (2026), ang go_router ay ginagamit sa 35% ng mga bagong Flutter project na mas pinipili ang deklaratibong approach.

Halimbawa ng nabigasyon sa Flutter app

Tingnan natin ang isang halimbawa ng Navigator na may pinangalanang ruta at paglipat ng data sa pagitan ng mga screen. Ang code ay nagpapakita ng screen ng listahan ng produkto, transition sa detail screen at pagbabalik na may resulta.

// Configuration ng ruta sa 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(),
    );
  },
)

// Nabigasyon na may paglipat ng data
final result = await Navigator.pushNamed(
  context,
  '/product',
  arguments: 'product_42',
);

// Pagkuha ng data sa tumatanggap na screen
final args = ModalRoute.of(context)!.settings.arguments as String;

// Palitan ang screen pagkatapos mag-login
Navigator.pushReplacementNamed(context, '/home');

// I-clear ang stack patungo sa main screen
Navigator.pushNamedAndRemoveUntil(
  context,
  '/home',
  (route) => false,
);

Sa halimbawa, ang Navigator.pushNamed ay nagpapasa ng product identifier sa detail screen. Sa pagbabalik sa pamamagitan ng Navigator.pop(context, updatedProduct), ang tumatawag na screen ay tumatanggap ng updated na data sa variable na result. Ang pushReplacementNamed ay pinapalitan ang kasalukuyang screen pagkatapos ng awtorisasyon, at ang pushNamedAndRemoveUntil na may kondisyon (route) => false ay ganap na nag-clear ng stack, pumipigil sa pagbabalik sa mga nakaraang screen.