Navigator: यह क्या है, Flutter में स्क्रीन प्रबंधन

Flutter में Navigator क्या है

Navigator एक विजेट है जो Route ऑब्जेक्ट्स के स्टैक का प्रबंधन करता है, Flutter एप्लिकेशन में स्क्रीन नेविगेशन लागू करता है। push का प्रत्येक कॉल एक नए Route को स्टैक के शीर्ष पर रखता है, pop शीर्ष Route को हटाता है और पिछली स्क्रीन पर लौटता है। MaterialApp पूरे एप्लिकेशन के लिए स्वचालित रूप से एक Navigator बनाता है, जिससे यह Navigator.of(context) के माध्यम से सुलभ होता है।

StatefulWidget के विपरीत, जहां सामग्री प्रतिस्थापन एक ही विजेट के अंदर setState के माध्यम से होता है, Navigator पूर्ण स्क्रीन के साथ काम करता है जिनका अपना जीवनचक्र होता है। स्टैक में प्रत्येक Route अपने स्वयं के BuildContext के साथ एक पृथक स्थिति है, जो मेमोरी लीक को रोकता है और निर्भरता प्रबंधन को सरल बनाता है। जब pop कॉल किया जाता है, तो अप्रयुक्त Route नष्ट हो जाता है, संसाधनों को मुक्त करता है।

Flutter Navigation Guide (2026) के अनुसार, Navigator अनिवार्य API (Navigator 1.0) से घोषणात्मक (Navigator 2.0) तक विकसित हुआ है। Navigator 1.0 सीधे push/pop विधियों का उपयोग करता है, जो सरल परिदृश्यों के लिए सुविधाजनक है। Navigator 2.0 (Router) गहरे लिंक, अनुकूली नेविगेशन और वेब रूटिंग वाले एप्लिकेशन के लिए उपयुक्त है।

Navigator अंदर से कैसे काम करता है

आंतरिक रूप से, Navigator Overlay का उपयोग करता है — एक विशेष विजेट जो Routes को एक दूसरे के ऊपर प्रदर्शित करता है। प्रत्येक Route स्टैक में अपनी गहराई के अनुरूप z-index के साथ Overlay में अपनी स्थिति बनाता है। यह बताता है कि push कॉल करने पर नई स्क्रीन पिछली स्क्रीन के ऊपर एनिमेट क्यों होती है, और pop कॉल करने पर पिछली स्क्रीन प्रदर्शित होने के लिए पहले से तैयार क्यों होती है: यह नष्ट नहीं हुई थी बल्कि नई स्क्रीन के नीचे Overlay में बनी रही।

संक्रमण एनिमेशन के लिए, Navigator PageTransitionsTheme का उपयोग करता है, जिसे ThemeData में ओवरराइड किया जा सकता है। प्लेटफ़ॉर्म-विशिष्ट एनिमेशन iOS के लिए CupertinoPageRoute (दाएं से स्लाइड) और Android के लिए MaterialPageRoute (नीचे से स्लाइड) के माध्यम से सेट किए जाते हैं। PlatformRoute का उपयोग करते समय Navigator स्वचालित रूप से सही एनिमेशन चुनता है।

Navigator विधियाँ: push, pop और pushReplacement

Navigator Route स्टैक के प्रबंधन के लिए विधियों का एक सेट प्रदान करता है। प्रत्येक विधि एक विशिष्ट नेविगेशन कार्य को हल करती है — एक साधारण संक्रमण से लेकर स्क्रीन इतिहास के पूर्ण प्रतिस्थापन तक। आइए उपयोग उदाहरणों के साथ मुख्य विधियों की समीक्षा करें।

Push और Pop: बुनियादी संचालन

push विधि एक Route लेती है और pop के दौरान पारित परिणाम के साथ एक Future लौटाती है। यह उस स्क्रीन से डेटा प्राप्त करने की अनुमति देती है जिस पर नेविगेट किया गया था। उदाहरण के लिए, एक दिनांक चयनकर्ता स्क्रीन Navigator.pop(context, selectedDate) के माध्यम से DateTime लौटा सकती है। pop विधि बिना तर्क के null लौटाती है, तर्क के साथ — कॉल करने वाली स्क्रीन को मान पास करती है।

PushReplacement: स्क्रीन बदलना

pushReplacement वर्तमान Route को एक नए से बदलता है, वर्तमान रूट को स्टैक से हटाता है। यह उन परिदृश्यों के लिए महत्वपूर्ण है जहां उपयोगकर्ता को पिछली स्क्रीन पर वापस नहीं लौटना चाहिए। एक सामान्य उदाहरण — लॉगिन स्क्रीन: सफल लॉगिन के बाद, वर्तमान स्क्रीन को मुख्य स्क्रीन से बदल दिया जाता है, और बैक बटन लॉगिन फॉर्म पर वापस नहीं लौटता।

नामांकित रूट्स और onGenerateRoute

Navigator pushNamed विधि के माध्यम से नामांकित रूट्स द्वारा नेविगेशन का समर्थन करता है। सीधे Route बनाने के बजाय, डेवलपर एक स्ट्रिंग पहचानकर्ता निर्दिष्ट करता है, और Navigator MaterialApp में कॉन्फ़िगरेशन के आधार पर स्वचालित रूप से Route बनाता है। यह कोड को सरल बनाता है और एक स्थान पर रूट परिभाषा को केंद्रीकृत करता है।

नामांकित रूट्स MaterialApp में routes गुण के माध्यम से परिभाषित किए जाते हैं, जहां प्रत्येक कुंजी एक पथ स्ट्रिंग है और मान एक फ़ंक्शन है जो Widget लौटाता है। गतिशील रूट्स (पैरामीटर के साथ) के लिए, onGenerateRoute का उपयोग किया जाता है — एक कॉलबैक जो RouteSettings प्राप्त करता है और Route लौटाता है। यह arguments पैरामीटर के माध्यम से तर्क पास करने और गहन नेविगेशन लागू करने की अनुमति देता है।

Flutter Cookbook (2026) के अनुसार, pushNamed के माध्यम से तर्क पास करना arguments: Object? पैरामीटर के साथ किया जाता है। प्राप्त करने वाली स्क्रीन ModalRoute.of(context)!.settings.arguments के माध्यम से तर्क निकालती है, जो वैश्विक चर या InheritedWidget के बिना टाइप-सुरक्षित डेटा स्थानांतरण प्रदान करती है।

अज्ञात रूट्स को संभालना

MaterialApp में onUnknownRoute गुण उन मामलों को संभालता है जहां pushNamed को अस्तित्वहीन रूट के साथ कॉल किया जाता है। यह 404 स्क्रीन दिखाने या होम पेज पर रीडायरेक्ट करने के लिए उपयोगी है। onGenerateRoute के साथ संयोजन में, यह सभी संभावित नेविगेशन परिदृश्यों का पूर्ण कवरेज सुनिश्चित करता है।

Navigator 2.0 और घोषणात्मक Router नेविगेशन

Navigator 2.0 (Router API के रूप में भी जाना जाता है) Flutter 2.0 में पेश की गई नेविगेशन के लिए एक घोषणात्मक दृष्टिकोण है। अनिवार्य Navigator 1.0 के विपरीत, जहां डेवलपर push/pop कॉल करता है, Router स्थिति के माध्यम से नेविगेशन का प्रबंधन करता है, स्वचालित रूप से ब्राउज़र URL को वर्तमान स्क्रीन के साथ सिंक्रनाइज़ करता है। यह विशेष रूप से वेब एप्लिकेशन और डेस्कटॉप संस्करणों के लिए महत्वपूर्ण है।

Navigator 2.0 आर्किटेक्चर में तीन प्रमुख घटक शामिल हैं: RouteInformationParser URL को रूट कॉन्फ़िगरेशन में पार्स करता है, RouterDelegate कॉन्फ़िगरेशन को Routes की सूची में बदलता है, और BackButtonDispatcher सिस्टम बैक बटन को संभालता है। यह आर्किटेक्चर नेविगेशन को पूरी तरह से पूर्वानुमानित और परीक्षण योग्य बनाता है।

Navigator 2.0 के साथ काम करना सरल बनाने के लिए, रैपर पैकेज मौजूद हैं: go_router (Google द्वारा अनुशंसित), auto_route और beamer। go_router मैन्युअल रूप से RouterDelegate लागू किए बिना नेस्टेड नेविगेशन, रीडायरेक्ट और गहरे लिंक के समर्थन के साथ रूट्स परिभाषित करने के लिए एक घोषणात्मक DSL प्रदान करता है। pub.dev (2026) के अनुसार, go_router का उपयोग 35% नए Flutter प्रोजेक्ट्स में किया जाता है जो घोषणात्मक दृष्टिकोण पसंद करते हैं।

Flutter एप्लिकेशन में नेविगेशन उदाहरण

आइए नामांकित रूट्स और स्क्रीन के बीच डेटा पास करने के साथ Navigator का एक उदाहरण देखें। कोड एक उत्पाद सूची स्क्रीन, एक विवरण स्क्रीन पर संक्रमण और परिणाम के साथ वापसी प्रदर्शित करता है।

// Route configuration in 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(),
    );
  },
)

// Navigation with data passing
final result = await Navigator.pushNamed(
  context,
  '/product',
  arguments: 'product_42',
);

// Getting data on the receiving screen
final args = ModalRoute.of(context)!.settings.arguments as String;

// Replace screen after login
Navigator.pushReplacementNamed(context, '/home');

// Clear stack to main screen
Navigator.pushNamedAndRemoveUntil(
  context,
  '/home',
  (route) => false,
);

उदाहरण में, Navigator.pushNamed उत्पाद आईडी को विवरण स्क्रीन पर भेजता है। Navigator.pop(context, updatedProduct) के माध्यम से वापसी पर, कॉल करने वाली स्क्रीन result वेरिएबल में अद्यतन डेटा प्राप्त करती है। pushReplacementNamed प्राधिकरण के बाद वर्तमान स्क्रीन को बदलता है, और शर्त (route) => false के साथ pushNamedAndRemoveUntil पूरी तरह से स्टैक को साफ़ करता है, पिछली स्क्रीन पर वापस नेविगेशन को रोकता है।