Flutter मोबाइल विकास · पाठ

नामित रूट और तर्क

अधिक सुव्यवस्थित नेविगेशन के लिए नामित रूट का उपयोग करें और रूट तर्कों के माध्यम से स्क्रीन के बीच डेटा प्रभावी ढंग से भेजें।

पाठ 2, कुल 4 में से11 चरण

नामित रूट और तर्क, CoddyKit पर Flutter मोबाइल विकास का एक निःशुल्क पाठ है। यह 4 में से 2वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह Flutter मोबाइल विकास सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Flutter मोबाइल विकास पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

नामित रूट क्यों

पिछले पाठों में हमने नेविगेशन के लिए MaterialPageRoute का उपयोग किया था। सरल ऐप के लिए यह प्रभावी है, लेकिन इस तरीके से कई रूट का प्रबंधन करना अव्यवस्थित हो सकता है।

  • हर रूट के लिए एक नया MaterialPageRoute इंस्टेंस आवश्यक होता है।
  • स्क्रीन को किसी विशिष्ट नाम से पहचानना कठिन होता है।
  • इससे बार-बार दोहराया जाने वाला कोड बन सकता है।

नामित रूट आपके ऐप के नेविगेशन को प्रबंधित करने का अधिक साफ़ और व्यवस्थित तरीका प्रदान करते हैं।

नामित रूट परिभाषित करना

नामित रूट का उपयोग करने के लिए, उन्हें अपने MaterialApp विजेट में परिभाषित कीजिए। यह routes प्रॉपर्टी का उपयोग करके किया जाता है।

  • routes प्रॉपर्टी में Map लिया जाता है।
  • key रूट का नाम है (एक String, जैसे '/details')।
  • value वह फ़ंक्शन है जो उस रूट के लिए विजेट बनाता है।

'/' रूट विशेष है; यह आपके ऐप का प्रारंभिक रूट है।

नामित रूट पर जाना

नामित रूट परिभाषित करने के बाद, आप Navigator.pushNamed() का उपयोग करके उन पर जा सकते हैं। यह मेथड BuildContext और रूट का नाम लेता है।

किसी विशेष स्क्रीन पर जाने के लिए हर बार नया MaterialPageRoute बनाने की तुलना में यह अधिक सरल और पढ़ने में आसान है।

नामित रूट का मूल प्रदर्शन

आइए देखें कि नामित रूट को कैसे सेट अप किया जाता है और उनका उपयोग करके कैसे जाया जाता है। हम दो सरल स्क्रीन बनाएँगे: HomeScreen और DetailScreen।

इसे काम करते हुए देखने के लिए 'Run' बटन पर टैप कीजिए!

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Named Routes Demo',
      initialRoute: '/',
      routes: {
        '/': (context) => HomeScreen(),
        '/details': (context) => DetailScreen(),
      },
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home Screen')),
      body: Center(
        child: ElevatedButton(
          child: Text('Go to Details'),
          onPressed: () {
            Navigator.pushNamed(context, '/details');
          },
        ),
      ),
    );
  }
}

class DetailScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Detail Screen')),
      body: Center(
        child: Text('You are on the Detail Screen!',
          style: TextStyle(fontSize: 20)),
      ),
    );
  }
}

आर्ग्युमेंट क्यों भेजें?

अक्सर, किसी नई स्क्रीन पर जाते समय आपको उसमें कुछ डेटा भेजना पड़ता है। उदाहरण के लिए:

  • उत्पाद के विवरण वाले पेज के लिए उत्पाद ID।
  • प्रोफ़ाइल संपादन स्क्रीन के लिए उपयोगकर्ता का विवरण।
  • पुष्टिकरण पेज के लिए कोई संदेश।

रूट आर्ग्युमेंट आपको नेविगेशन अनुरोध के साथ यह जानकारी भेजने की सुविधा देते हैं।

आर्ग्युमेंट भेजना

आप Navigator.pushNamed() में arguments प्रॉपर्टी का उपयोग करके नामित रूट को आर्ग्युमेंट भेज सकते हैं।

  • arguments प्रॉपर्टी किसी भी Object को स्वीकार करती है।
  • सरल डेटा प्रकार (जैसे String, int) या आपके डेटा को समेटने वाली कस्टम क्लास/मैप भेजना अच्छी पद्धति है।

उदाहरण के लिए: Navigator.pushNamed(context, '/details', arguments: 'Hello from Home!');

आर्ग्युमेंट प्राप्त करना

गंतव्य स्क्रीन में, आप ModalRoute.of(context)!.settings.arguments का उपयोग करके आर्ग्युमेंट प्राप्त कर सकते हैं।

  • ModalRoute.of(context) वर्तमान रूट प्राप्त करता है।
  • .settings रूट की सेटिंग्स तक पहुँचता है।
  • .arguments भेजे गए डेटा को प्राप्त करता है।

यदि आपको विश्वास है कि आर्ग्युमेंट मौजूद होंगे, तो नल सुरक्षा के लिए ! का उपयोग करना याद रखें; अन्यथा संभावित नल मानों को संभालें।

प्रकार की सुरक्षा और कास्टिंग

.arguments प्रॉपर्टी Object? लौटाती है। इसका अर्थ है कि आपको आमतौर पर इसे अपेक्षित प्रकार में कास्ट करना होगा।

उदाहरण के लिए, यदि आपने String भेजा है, तो आप उसे इस प्रकार प्राप्त करेंगे:

final String message = ModalRoute.of(context)!.settings.arguments as String;

मज़बूती के लिए जाँच जोड़ना अच्छी पद्धति है (जैसे if (arguments is String)), खासकर जटिल आर्ग्युमेंट प्रकारों के साथ।

आर्ग्युमेंट वाले नामित रूट का प्रदर्शन

यह उदाहरण नामित रूट और आर्ग्युमेंट का उपयोग करके HomeScreen से DetailScreen तक एक सरल String संदेश भेजना दिखाता है।

इसके बाद DetailScreen यह संदेश प्रदर्शित करती है।

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Named Routes with Args',
      initialRoute: '/',
      routes: {
        '/': (context) => HomeScreen(),
        '/details': (context) => DetailScreen(),
      },
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home Screen')),
      body: Center(
        child: ElevatedButton(
          child: Text('Go to Details with Message'),
          onPressed: () {
            Navigator.pushNamed(
              context,
              '/details',
              arguments: 'Hello from Home Screen!',
            );
          },
        ),
      ),
    );
  }
}

class DetailScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final String? message = 
        ModalRoute.of(context)!.settings.arguments as String?;

    return Scaffold(
      appBar: AppBar(title: Text('Detail Screen')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('You are on the Detail Screen!',
              style: TextStyle(fontSize: 20)),
            SizedBox(height: 20),
            Text('Message: ${message ?? "No message received"}',
              style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold)),
          ],
        ),
      ),
    );
  }
}

त्वरित जाँच: आर्ग्युमेंट

आप '/settings' नामक नामित रूट पर गए हैं और आर्ग्युमेंट के रूप में true बूलियन मान भेजा है। आप SettingsScreen विजेट में इस बूलियन को सही तरीके से कैसे प्राप्त करके उपयोग करेंगे?

पुनरावलोकन: नामित रूट और आर्ग्युमेंट

बहुत बढ़िया! आपने नेविगेशन को सरल बनाना और डेटा को कुशलतापूर्वक भेजना सीखा है।

  • नामित रूट: विशिष्ट स्ट्रिंग नामों वाले रूट परिभाषित करने के लिए MaterialApp में routes का उपयोग कीजिए।
  • नेविगेशन: अधिक सुव्यवस्थित नेविगेशन के लिए Navigator.pushNamed(context, '/routeName') का उपयोग कीजिए।
  • आर्ग्युमेंट भेजना: डेटा भेजने के लिए pushNamed में arguments प्रॉपर्टी का उपयोग कीजिए।
  • आर्ग्युमेंट प्राप्त करना: गंतव्य स्क्रीन पर ModalRoute.of(context)!.settings.arguments से डेटा प्राप्त कीजिए और उसे सही प्रकार में कास्ट कीजिए।

यह तरीका आपके ऐप के नेविगेशन को अधिक व्यवस्थित और बनाए रखना आसान बनाता है!

शुरुआत निःशुल्क

एआई शिक्षक के साथ Dart सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम
22
पाठ
88

अक्सर पूछे जाने वाले प्रश्न

क्या “नामित रूट और तर्क” पाठ निःशुल्क है?

हाँ — Flutter मोबाइल विकास अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “नामित रूट और तर्क” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। Flutter मोबाइल विकास पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“नामित रूट और तर्क” में मैं क्या सीखूँगा?

अधिक सुव्यवस्थित नेविगेशन के लिए नामित रूट का उपयोग करें और रूट तर्कों के माध्यम से स्क्रीन के बीच डेटा प्रभावी ढंग से भेजें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Flutter मोबाइल विकास का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Flutter मोबाइल विकास शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Flutter मोबाइल विकास शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 2वाँ पाठ है।

“नामित रूट और तर्क” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Flutter मोबाइल विकास पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Flutter मोबाइल विकास पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

  1. पृष्ठ नेविगेशन की मूल बातें
  2. नामित रूट और तर्क
  3. TabBars और ड्रॉअर
  4. डीप लिंकिंग और URL नेविगेशन
← Flutter मोबाइल विकास पर वापस जाएँ