Route — यह क्या है, फ्लटर में रूट के प्रकार और निर्माण

Flutter में Route क्या है

Route Flutter नेविगेशन सिस्टम की नींव है। एप्लिकेशन में उपयोगकर्ता द्वारा देखी जाने वाली प्रत्येक स्क्रीन को Navigator स्टैक में स्थित एक Route ऑब्जेक्ट द्वारा दर्शाया जाता है। Route स्क्रीन को नियंत्रण कोड से अलग करता है: Navigator Route को जोड़ता और हटाता है, जबकि Route के अंदर वह इंटरफ़ेस होता है जो उपयोगकर्ता देखता है। यह आर्किटेक्चर नेविगेशन और प्रदर्शन के बीच जिम्मेदारी को अलग करता है।

सामान्य widget प्रतिस्थापन के विपरीत, Route सामान्य widgets के लिए अनुपलब्ध सेवाएँ प्रदान करता है: ModalBarrier (डायलॉग खुलने पर पृष्ठभूमि मंद करना), प्रवेश और निकास एनिमेशन नियंत्रण, Android पर हार्डवेयर बैक बटन हैंडलिंग और स्क्रीन के बीच सुगम संक्रमण के लिए Hero एनिमेशन के साथ एकीकरण।

Flutter Cookbook (2026) के अनुसार, Route Hero एनिमेशन के लिए एक मुख्य तत्व है: एक Route पर Hero widget स्वचालित रूप से अगले Route पर Hero widget में संक्रमण को एनिमेट करता है, जिससे “उड़ने” वाले तत्व का प्रभाव पैदा होता है। यह संभव है क्योंकि Route एनिमेशन के दौरान दोनों स्क्रीन को Overlay में रखता है।

नेविगेशन के निर्माण खंड के रूप में Route

Route सरल मोबाइल एप्लिकेशन (Navigator 1.0 के माध्यम से) और गहरे लिंक वाले जटिल परिदृश्यों (Navigator 2.0) दोनों के लिए आधार है। Navigator 2.0 में, Route एक Page का प्रतिनिधित्व करता है जिसे RouterDelegate रूट कॉन्फ़िगरेशन से परिवर्तित करता है। इस प्रकार, किसी भी Flutter नेविगेशन सिस्टम के साथ काम करने के लिए Route को समझना आवश्यक है — चुने गए दृष्टिकोण या पैकेज की परवाह किए बिना।

Route प्रकार: MaterialPageRoute और CupertinoPageRoute

Flutter Route के कई अंतर्निहित कार्यान्वयन प्रदान करता है, प्रत्येक व्यवहार को एक विशिष्ट प्लेटफ़ॉर्म के अनुकूल बनाता है। सही Route प्रकार चुनना उपयोगकर्ता अनुभव को प्रभावित करता है: Android पर Material एनिमेशन और iOS पर Cupertino एनिमेशन एक “देशी” एप्लिकेशन की अनुभूति पैदा करता है।

MaterialPageRoute: Android के लिए मानक

MaterialPageRoute सबसे अधिक उपयोग किया जाने वाला Route कार्यान्वयन है। यह क्रमिक प्रकटन के साथ नई स्क्रीन को नीचे से ऊपर एनिमेट करता है। बाहर निकलने पर, स्क्रीन ऊपर से नीचे एनिमेट होती है, अपनी मूल स्थिति में लौट आती है। टूलबार (AppBar) और स्क्रीन बॉडी अलग-अलग एनिमेट होते हैं, जो एक पदानुक्रम प्रभाव पैदा करता है।

CupertinoPageRoute: iOS नेविगेशन शैली

CupertinoPageRoute iOS के UINavigationController की नकल करता है। नई स्क्रीन दाएं से प्रवेश करती है, पिछली स्क्रीन को कवर करती है। मुख्य विशेषता CupertinoBackGestureDetector के माध्यम से कार्यान्वित इंटरैक्टिव स्वाइप-बैक जेस्चर के लिए समर्थन है। यह जेस्चर एनिमेशन के बीच में भी संभाला जाता है, जो iPhone उपयोगकर्ताओं से परिचित प्राकृतिक व्यवहार प्रदान करता है।

Route जीवनचक्र: निर्माण से निपटान तक

Route का अपना जीवनचक्र होता है, जो सामान्य StatefulWidget के जीवनचक्र से भिन्न होता है। इस चक्र को समझना उचित डेटा आरंभीकरण, स्ट्रीम सब्सक्रिप्शन और स्क्रीन बंद करने पर संसाधन मुक्ति के लिए आवश्यक है।

Route जीवनचक्र के चरण

Route जीवनचक्र में चार मुख्य चरण होते हैं। संक्रमण — Route बनाया जाता है और प्रवेश पर एनिमेट किया जाता है (didPush कहा जाता है)। सक्रिय — Route पूरी तरह से प्रदर्शित होता है और उपयोगकर्ता के साथ इंटरैक्ट करता है। निष्क्रिय — दूसरा Route वर्तमान को कवर करता है (डायलॉग, बॉटम शीट), लेकिन Route स्टैक में रहता है। निपटान — Route स्टैक से हटा दिया जाता है और नष्ट कर दिया जाता है, didPop और dispose कहा जाता है।

Route जीवनचक्र विधियों को कस्टम कार्यान्वयन में ओवरराइड किया जा सकता है। उदाहरण के लिए, didPop तब कहा जाता है जब Route स्टैक से हटा दिया जाता है — यहाँ आप ड्राफ्ट डेटा सहेज सकते हैं। didChangeNext तब कहा जाता है जब स्टैक में अगला Route बदल गया है — नेविगेशन इतिहास बदलने पर UI अपडेट करने के लिए उपयोगी।

Flutter API Route.didPop (2026) के अनुसार, Route जीवनचक्र को Route के अंदर State के जीवनचक्र से भ्रमित नहीं करना महत्वपूर्ण है। Route के अंदर StatefulWidget का अपना initState और dispose होता है, जो क्रमशः संक्रमण और निपटान चरणों के दौरान कहा जाता है। Route अपने आंतरिक State से अधिक समय तक जीवित रहता है — Route Overlay में तब भी रहता है जब उसके widgets अस्थायी रूप से दूसरे Route द्वारा छिपाए गए हों।

Route के माध्यम से स्क्रीन के बीच डेटा स्थानांतरण

Route इनपुट (निर्माण के समय) और आउटपुट (समाप्त होने पर) दोनों पर डेटा स्थानांतरित करने के लिए तंत्र प्रदान करता है। Route के माध्यम से उचित डेटा स्थानांतरण वैश्विक चर और InheritedWidget की आवश्यकता को समाप्त करता है, नेविगेशन को टाइप-सेफ और अनुमानित बनाता है।

नई स्क्रीन पर डेटा स्थानांतरित करने के लिए, प्राप्त करने वाले widget के कंस्ट्रक्टर या Navigator.pushNamed में arguments पैरामीटर का उपयोग करें। Route के अंदर, डेटा RouteSettings.arguments के माध्यम से सुलभ होता है, जो Route ऑब्जेक्ट में संग्रहीत होता है। यह दृष्टिकोण सभी Route प्रकारों — MaterialPageRoute, CupertinoPageRoute और कस्टम कार्यान्वयन के लिए काम करता है।

डेटा लौटाने के लिए, Navigator.pop(context, result) के दूसरे तर्क का उपयोग करें। Navigator.push Future लौटाता है, जो pop को दिए गए मान से पूरा होता है। यदि pop बिना तर्क के कहा जाता है, तो Future null से पूरा होता है। यह तंत्र Android में startActivityForResult और iOS में completion handler के अनुरूप है, लेकिन Dart Futures के माध्यम से कार्यान्वित किया गया है।

Route कंस्ट्रक्टर के माध्यम से डेटा स्थानांतरण

MaterialPageRoute के साथ सीधे Navigator.push कॉल करते समय, डेटा लक्ष्य स्क्रीन के कंस्ट्रक्टर के माध्यम से पारित किया जाता है। MethodChannel का उपयोग नहीं किया जाता है — यह शुद्ध Dart इंटरैक्शन है। यह दृष्टिकोण जटिल ऑब्जेक्ट के टाइप-सेफ स्थानांतरण के लिए बेहतर है।

कस्टम Route निर्माण उदाहरण

आइए अपने स्वयं के एनिमेशन और डेटा स्थानांतरण के साथ कस्टम Route बनाने का एक उदाहरण देखें। PageRouteBuilder एनिमेशन वक्र और अवधि पर पूर्ण नियंत्रण के साथ प्रवेश और निकास एनिमेशन को परिभाषित करने की अनुमति देता है।

// स्लाइड एनिमेशन के साथ कस्टम Route
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),
));

// स्क्रीन से डेटा लौटाएं
ElevatedButton(
  onPressed: () => Navigator.of(context).pop({'selected': true, 'id': '42'}),
  child: const Text('चुनें'),
);

// कॉल करने वाली स्क्रीन पर परिणाम प्राप्त करें
final result = await Navigator.push(context, MaterialPageRoute(
  builder: (context) => const SelectionPage(),
));
if (result != null) {
  print('चयनित: ${result['selected']}');
}

उदाहरण में, PageRouteBuilder पारदर्शिता के साथ नीचे से एक कस्टम स्लाइड एनिमेशन परिभाषित करता है। transitionDuration एनिमेशन की गति निर्धारित करता है। कोड परिणाम स्थानांतरण भी प्रदर्शित करता है: विस्तार स्क्रीन उपयोगकर्ता के चयन के साथ एक Map लौटाती है, और कॉल करने वाली स्क्रीन push से Future के माध्यम से यह डेटा प्राप्त करती है। Route पूर्ण अलगाव सुनिश्चित करता है: विस्तार स्क्रीन पर ड्राफ्ट सूची की स्थिति को प्रभावित नहीं करते हैं।