Route — ano ito, mga uri at paggawa ng ruta sa Flutter

Ano ang Route sa Flutter

Route — ay ang pundasyon ng sistema ng nabigasyon ng Flutter. Ang bawat screen na nakikita ng user sa app ay kinakatawan ng isang Route object na nasa stack ng Navigator. Inaabstrak ng Route ang screen mula sa management code: Nagdadagdag at nag-aalis ng Route ang Navigator, at sa loob ng Route ay ang interface na nakikita ng user. Ang arkitekturang ito ay naghihiwalay ng responsibilidad sa pagitan ng nabigasyon at pagpapakita.

Hindi tulad ng simpleng pagpapalit ng widget, ang Route ay nagbibigay ng mga serbisyong hindi available sa mga ordinaryong widget: ModalBarrier (pagdidilim ng background kapag may bukas na dialog), pamamahala ng animasyon ng pagpasok at paglabas, pagproseso ng hardware na “Bumalik” na buton sa Android at pagsasama sa Hero animasyon para sa maayos na paglipat sa pagitan ng mga screen.

Ayon sa Flutter Cookbook (2026), ang Route ay isang pangunahing elemento para sa Hero animasyon: ang Hero widget sa isang Route ay awtomatikong nag-a-animate ng paglipat sa Hero widget sa susunod na Route, na lumilikha ng epekto ng isang “lumilipad” na elemento. Ito ay posible dahil pinapanatili ng Route ang parehong screen sa Overlay sa panahon ng animasyon.

Route bilang bloke ng pagbuo ng nabigasyon

Route ay pundasyon para sa parehong simpleng mobile app (sa pamamagitan ng Navigator 1.0) at mga komplikadong senaryo na may malalim na link (Navigator 2.0). Sa Navigator 2.0, kinakatawan ng Route ang Page na kino-convert ng RouterDelegate mula sa configuration ng ruta. Kaya, ang pag-unawa sa Route ay kinakailangan para sa pagtatrabaho sa anumang sistema ng nabigasyon ng Flutter — anuman ang napiling diskarte o package.

Mga uri ng Route: MaterialPageRoute at CupertinoPageRoute

Flutter ay nagbibigay ng ilang built-in na implementasyon ng Route, bawat isa ay nag-aangkop ng pag-uugali para sa isang partikular na platform. Ang pagpili ng tamang uri ng Route ay nakakaapekto sa karanasan ng user: ang Material na animasyon sa Android at Cupertino na animasyon sa iOS ay lumilikha ng pakiramdam ng isang “native” na app.

MaterialPageRoute: pamantayan para sa Android

MaterialPageRoute — ang pinakamadalas na ginagamit na implementasyon ng Route. Ina-animate nito ang pagpasok ng bagong screen mula sa ibaba pataas na may unti-unting paglitaw. Sa paglabas, ang screen ay nag-a-animate mula sa itaas pababa, bumabalik sa orihinal na posisyon. Ang toolbar (AppBar) at katawan ng screen ay nag-a-animate nang hiwalay, na lumilikha ng epekto ng hierarchy.

CupertinoPageRoute: istilo ng nabigasyon ng iOS

CupertinoPageRoute ay ginagaya ang UINavigationController mula sa iOS. Ang bagong screen ay pumapasok mula sa kanan, tinatakpan ang nauna. Ang pangunahing tampok — suporta para sa interactive na kilos swipe pabalik, na ipinatupad sa pamamagitan ng CupertinoBackGestureDetector. Ang kilos na ito ay pinoproseso kahit sa gitna ng animasyon, na nagbibigay ng natural na pag-uugali na pamilyar sa mga gumagamit ng iPhone.

Lifecycle ng Route: mula sa paggawa hanggang sa pagkasira

Route ay may sariling lifecycle na naiiba sa lifecycle ng isang ordinaryong StatefulWidget. Ang pag-unawa sa cycle na ito ay kinakailangan para sa tamang pagsisimula ng data, pag-subscribe sa mga stream, at pagpapalaya ng mga mapagkukunan kapag nagsasara ang screen.

Mga yugto ng lifecycle ng Route

Ang lifecycle ng Route ay binubuo ng apat na pangunahing yugto. Transition — ginagawa at ina-animate ang Route sa pagpasok (tinatawag ang didPush). Active — ganap na ipinapakita ang Route at nakikipag-ugnayan sa user. Inactive — tinatakpan ng ibang Route ang kasalukuyan (dialog, ibabang screen), ngunit nananatili ang Route sa stack. Disposed — tinatanggal ang Route mula sa stack at sinisira, tinatawag ang didPop at dispose.

Ang mga pamamaraan ng lifecycle ng Route ay maaaring ma-override sa isang custom na implementasyon. Halimbawa, ang didPop ay tinatawag kapag tinanggal ang Route mula sa stack — dito maaaring i-save ang isang draft ng data. Ang didChangeNext ay tinatawag kapag ang susunod na Route sa stack ay nagbago — kapaki-pakinabang para sa pag-update ng UI kapag nagbago ang kasaysayan ng nabigasyon.

Ayon sa Flutter API Route.didPop (2026), mahalagang huwag malito ang lifecycle ng Route sa lifecycle ng State sa loob ng Route. Ang StatefulWidget sa loob ng Route ay may sariling initState at dispose na tinatawag sa mga yugto ng Transition at Disposed ayon sa pagkakabanggit. Mas mahaba ang buhay ng Route kaysa sa panloob na State nito — nananatili ang Route sa Overlay kahit na ang mga widget nito ay pansamantalang nakatago ng ibang Route.

Paglilipat ng data sa pamamagitan ng Route sa pagitan ng mga screen

Route ay nagbibigay ng mga mekanismo para sa paglilipat ng data pareho sa pagpasok (sa paggawa) at sa paglabas (sa pagkumpleto). Ang tamang paglilipat ng data sa pamamagitan ng Route ay nag-aalis ng pangangailangan para sa mga global variable at InheritedWidget, na ginagawang type-safe at predictable ang nabigasyon.

Para sa paglilipat ng data sa isang bagong screen, ginagamit ang constructor ng tumatanggap na widget o ang argumentong arguments sa Navigator.pushNamed. Sa loob ng Route, ang data ay maa-access sa pamamagitan ng RouteSettings.arguments na naka-imbak sa Route object. Ang diskarteng ito ay gumagana para sa lahat ng uri ng Route — MaterialPageRoute, CupertinoPageRoute at custom na implementasyon.

Para sa pagbabalik ng data, ginagamit ang pangalawang argumento Navigator.pop(context, result). Ang Navigator.push ay nagbabalik ng Future na nakumpleto sa halagang ipinasa sa pop. Kung ang pop ay tinawag nang walang argumento, ang Future ay nakumpleto na may null. Ang mekanismong ito ay katumbas ng startActivityForResult sa Android at completion handler sa iOS, ngunit ipinatupad sa pamamagitan ng Dart Futures.

Halimbawa ng paglilipat ng data sa pamamagitan ng constructor ng Route

Sa direktang pagtawag ng Navigator.push na may MaterialPageRoute, ang data ay inililipat sa pamamagitan ng constructor ng target na screen. Hindi ginagamit ang MethodChannel — ito ay purong Dart na interaksyon. Ang diskarteng ito ay mas gusto para sa type-safe na paglilipat ng mga komplikadong bagay.

Halimbawa ng paggawa ng custom na Route

Tingnan natin ang isang halimbawa ng paggawa ng custom na Route na may sariling animasyon at paglilipat ng data. Ang PageRouteBuilder ay nagbibigay-daan upang tukuyin ang animasyon ng pagpasok at paglabas na may buong kontrol sa kurba ng animasyon at tagal.

// Custom na Route na may slide animasyon
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),
));

// Ibawas ang data mula sa screen
ElevatedButton(
  onPressed: () => Navigator.of(context).pop({'selected': true, 'id': '42'}),
  child: const Text('Pumili'),
);

// Kunin ang resulta sa tumatawag na screen
final result = await Navigator.push(context, MaterialPageRoute(
  builder: (context) => const SelectionPage(),
));
if (result != null) {
  print('Napili: ${result['selected']}');
}

Sa halimbawa, ang PageRouteBuilder ay tumutukoy ng custom na slide-mula-sa-ibaba na animasyon na may transparency. Ang transitionDuration ay nagtatakda ng bilis ng animasyon. Ipinapakita rin ng code ang pagpapadala ng resulta: ang screen ng detalye ay nagbabalik ng Map na may pagpili ng user, at ang tumatawag na screen ay tumatanggap ng data na ito sa pamamagitan ng Future mula sa push. Route ay tinitiyak ang buong paghihiwalay: ang mga draft sa screen ng detalye ay hindi nakakaapekto sa estado ng listahan.