MaterialApp: यह क्या है और रूट विजेट को कैसे सेटअप करें

Flutter में MaterialApp क्या है?

MaterialApp एक रैपर विजेट है जो Flutter एप्लिकेशन में Material Design को आरंभ करता है। यह Widget Tree की जड़ है और चाइल्ड विजेट्स को सिस्टम सेवाओं तक पहुँच प्रदान करता है: नेविगेशन, थीम, मीडिया क्वेरी और लोकलाइज़ेशन। MaterialApp के बिना, एप्लिकेशन में मानक Material शैली नहीं होगी और यह Scaffold, AppBar, FloatingActionButton और BottomNavigationBar जैसे विजेट्स का उपयोग नहीं कर पाएगा।

MaterialApp Widget Tree में क्या जोड़ता है

MaterialApp का उपयोग करते समय, Flutter स्वचालित रूप से ट्री की जड़ में कई मुख्य विजेट जोड़ता है: Navigator (नेविगेशन के लिए स्क्रीन स्टैक), Theme (रंग योजना और शैलियाँ), MediaQuery (डिवाइस जानकारी), Localizations (स्थानीयकृत स्ट्रिंग्स), Directionality (टेक्स्ट दिशा)। ये विजेट InheritedWidget के रूप में कार्यान्वित होते हैं और एप्लिकेशन में कहीं भी BuildContext के माध्यम से सुलभ होते हैं।

मूल उपयोग

MaterialApp के न्यूनतम कॉन्फ़िगरेशन में केवल home पैरामीटर की आवश्यकता होती है — वह विजेट जो मुख्य स्क्रीन पर प्रदर्शित होता है। Flutter स्वचालित रूप से home को Scaffold में लपेटता है यदि वह पहले से Scaffold नहीं है, WidgetsBinding तंत्र के माध्यम से। जब आप runApp(MaterialApp(home: MyHomePage())) के साथ एप्लिकेशन लॉन्च करते हैं, तो Flutter MaterialApp को जड़ के रूप में एक रूट Widget Tree बनाता है।

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "My Application",
      theme: ThemeData(
        primarySwatch: Colors.blue,
        fontFamily: "Roboto",
      ),
      darkTheme: ThemeData(
        brightness: Brightness.dark,
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

इस उदाहरण में, MaterialApp मूल थीम (हल्की और गहरी), शीर्षक और मुख्य स्क्रीन को कॉन्फ़िगर करता है। पैरामीटर title का उपयोग विंडो शीर्षक (डेस्कटॉप पर) और एक्सेसिबिलिटी के लिए किया जाता है। पैरामीटर theme और darkTheme विभिन्न मोड में एप्लिकेशन की उपस्थिति को परिभाषित करते हैं।

MaterialApp की संरचना और पैरामीटर

MaterialApp 30 से अधिक पैरामीटर स्वीकार करता है, जो श्रेणियों में विभाजित हैं: Material Design सेटिंग्स, रूटिंग, थीमिंग, लोकलाइज़ेशन, त्रुटि व्यवहार और प्लेटफ़ॉर्म-विशिष्ट सेटिंग्स। मुख्य पैरामीटर को जानने से आप अतिरिक्त कोड लिखे बिना एप्लिकेशन को लचीले ढंग से कॉन्फ़िगर कर सकते हैं।

मुख्य कॉन्फ़िगरेशन पैरामीटर

पैरामीटर title विंडो शीर्षक और एक्सेसिबिलिटी के लिए एप्लिकेशन का नाम सेट करता है। color Android पर टास्क स्विचर के लिए एप्लिकेशन का रंग परिभाषित करता है। debugShowCheckedModeBanner रिलीज़ बिल्ड में डीबग मोड बैनर को छिपाता है। showPerformanceOverlay प्रदर्शन जानकारी के साथ एक ओवरले सक्षम करता है। supportDarkTheme इंगित करता है कि क्या एप्लिकेशन डार्क थीम का समर्थन करता है।

प्लेटफ़ॉर्म-विशिष्ट पैरामीटर

MaterialApp विभिन्न प्लेटफ़ॉर्म पर व्यवहार कॉन्फ़िगर करने के लिए पैरामीटर प्रदान करता है: restorationScopeId Android पर पुनरारंभ करने पर एप्लिकेशन स्थिति को संरक्षित करने के लिए, scrollBehavior विभिन्न OS पर स्क्रॉल व्यवहार कॉन्फ़िगर करने के लिए, useMaterial3 Material 3 (Material You) सक्षम करने के लिए। Material 3 डायनामिक रंग, नए घटक और अपडेटेड शैलियाँ जोड़ता है।

theme और darkTheme के साथ थीमिंग

थीमिंग MaterialApp के मुख्य पैरामीटर में से एक है। पैरामीटर theme एक ThemeData ऑब्जेक्ट स्वीकार करता है जो हल्की थीम के लिए रंग पैलेट, टाइपोग्राफी, घटक आकार और आइकनोग्राफी को परिभाषित करता है। पैरामीटर darkTheme गहरी थीम के लिए समकक्ष कॉन्फ़िगरेशन है। Flutter डिवाइस की सिस्टम सेटिंग्स के आधार पर स्वचालित रूप से थीम स्विच करता है।

ThemeData: रंग योजना

ThemeData में primarySwatch (मुख्य रंग), colorScheme (विस्तारित Material 3 रंग योजना), brightness (हल्का या गहरा), fontFamily (डिफ़ॉल्ट फ़ॉन्ट), textTheme (टेक्स्ट शैलियाँ), cardTheme, appBarTheme, buttonTheme और विशिष्ट घटकों को अनुकूलित करने के लिए दर्जनों अन्य पैरामीटर शामिल हैं। Material 3 के लिए colorScheme और Material 2 के लिए primarySwatch का उपयोग करें।

Material 3 डायनामिक रंग

Material 3 (Material You) डायनामिक रंगों का समर्थन करता है, जो Android 12+ पर डिवाइस वॉलपेपर से निकाले जाते हैं। इसे सक्षम करने के लिए, useMaterial3: true सेट करें और colorScheme.fromSeed या colorScheme.fromImageProvider का उपयोग करें। डायनामिक रंग स्वचालित रूप से 5 टोन का एक सामंजस्यपूर्ण पैलेट उत्पन्न करते हैं: primary, secondary, tertiary, neutral और neutralVariant।

विजेट में थीम तक पहुँच

कोई भी विजेट Theme.of(context) के माध्यम से वर्तमान थीम तक पहुँच सकता है। Theme.of एक ThemeData ऑब्जेक्ट लौटाता है जिससे आप colors, textTheme और अन्य पैरामीटर प्राप्त कर सकते हैं। थीम परिवर्तनों की सदस्यता लेने के लिए (उदाहरण के लिए, हल्के और गहरे मोड के बीच स्विच करते समय), build विधि के अंदर कॉन्टेक्स्ट का उपयोग करें — Flocker थीम बदलने पर स्वचालित रूप से विजेट का पुनर्निर्माण करेगा।

Container(
  color: Theme.of(context).colorScheme.primary,
  child: Text(
    "Themed text example",
    style: Theme.of(context).textTheme.headlineMedium,
  ),
)

इस उदाहरण में, Theme.of(context) निकटतम MaterialApp से वर्तमान थीम प्राप्त करता है। पृष्ठभूमि रंग और टेक्स्ट शैली स्वचालित रूप से वर्तमान थीम (हल्की या गहरी) से मेल खाती है। थीम स्विच करने पर, Container और Text अपडेटेड ThemeData से नए मानों के साथ पुनर्निर्मित होंगे।

MaterialApp में रूटिंग और नेविगेशन

MaterialApp Navigator को एकीकृत करता है — एक स्टैक-आधारित नेविगेटर जो स्क्रीन के बीच संक्रमण का प्रबंधन करता है। पैरामीटर initialRoute, routes और onGenerateRoute निर्धारित करते हैं कि Flutter नेविगेशन को कैसे संभालता है। Navigator.push और Navigator.pushReplacement प्रोग्रामेटिक रूप से स्क्रीन स्विच करने की अनुमति देते हैं, जबकि Navigator.pop वापस जाने की अनुमति देता है।

नामित रूट्स (routes)

पैरामीटर routes एक Map<String, WidgetBuilder> स्वीकार करता है, जहाँ कुंजी रूट का नाम (स्ट्रिंग) है और मान वह फ़ंक्शन है जो उस स्क्रीन के लिए विजेट बनाता है। नामित रूट स्थिर नेविगेशन के लिए सुविधाजनक हैं: '/' (रूट रूट) आमतौर पर home से मेल खाता है, '/settings', '/profile' — अन्य स्क्रीन। Navigator.pushNamed(context, '/settings') सेटिंग्स स्क्रीन पर नेविगेट करता है।

रूट जनरेशन (onGenerateRoute)

onGenerateRoute एक फ़ंक्शन है जो तब कॉल किया जाता है जब routes में कोई रूट नहीं मिलता है। यह RouteSettings स्वीकार करता है और MaterialPageRoute लौटाता है। यह दृष्टिकोण डायनामिक नेविगेशन के लिए उपयोगी है जब रूट डेटा पर निर्भर करते हैं (उदाहरण के लिए, /user/42)। onGenerateRoute रूट नाम को पार्स करता है, पैरामीटर निकालता है और उपयुक्त स्क्रीन बनाता है।

डीप लिंक और नामित रूटिंग

डीप लिंक्स (deep links) के समर्थन के लिए, onGenerateInitialRoute और onGenerateRoute पैरामीटर का एक साथ उपयोग करें। डीप लिंक URL के माध्यम से एप्लिकेशन की एक विशिष्ट स्क्रीन खोलने की अनुमति देते हैं (उदाहरण के लिए, https://example.com/promo)। Flutter Android (intent filters के माध्यम से) और iOS (universal links के माध्यम से) पर डीप लिंक को संभालता है और पथ को onGenerateRoute पर पास करता है।

MaterialApp(
  initialRoute: "/",
  routes: {
    "/": (context) => const HomePage(),
    "/settings": (context) => const SettingsPage(),
  },
  onGenerateRoute: (settings) {
    if (settings.name?.startsWith("/user/") == true) {
      final userId = settings.name!.split("/").last;
      return MaterialPageRoute(
        builder: (_) => UserPage(userId: userId),
      );
    }
    return null;
  },
)

इस उदाहरण में, onGenerateRoute /user/42 जैसे डायनामिक रूट को संभालता है। यदि रूट स्थिर routes में नहीं मिलता है और डायनामिक पैटर्न से मेल नहीं खाता है, तो Flutter एक त्रुटि पृष्ठ प्रदर्शित करता है, जिसे onUnknownRoute के माध्यम से अनुकूलित किया जा सकता है।

लोकलाइज़ेशन और अंतर्राष्ट्रीयकरण

MaterialApp पैरामीटर localizationsDelegates और supportedLocales के माध्यम से अंतर्निहित लोकलाइज़ेशन समर्थन प्रदान करता है। LocalizationsDelegates स्थानीयकृत स्ट्रिंग्स लोड करते हैं, और supportedLocales निर्धारित करता है कि एप्लिकेशन किन भाषाओं का समर्थन करता है। Flutter स्वचालित रूप से डिवाइस भाषा का पता लगाता है और संबंधित स्थानीयकृत संसाधनों को लोड करता है।

supportedLocales और localizationsDelegates कॉन्फ़िगर करना

पैरामीटर supportedLocales Locales की एक सूची स्वीकार करता है जो एप्लिकेशन समर्थन करता है: [const Locale('en'), const Locale('ru'), const Locale('de')]। localizationsDelegates डेलिगेट्स की एक सूची है जो स्थानीयकृत स्ट्रिंग्स लोड करते हैं। Material Design के लिए, GlobalMaterialLocalizations.delegate, GlobalWidgetsLocalizations.delegate और GlobalCupertinoLocalizations.delegate जोड़ें।

एप्लिकेशन स्ट्रिंग्स का लोकलाइज़ेशन

अपनी स्वयं की स्ट्रिंग्स को स्थानीयकृत करने के लिए, AppLocalizations क्लास का उपयोग करें, जो flutter_localizations या intl पैकेज के माध्यम से बनाई गई है। AppLocalizations स्थानीयकृत स्ट्रिंग्स तक पहुँचने के लिए स्थिर विधियाँ प्रदान करता है: AppLocalizations.of(context)!.helloMessage। MaterialApp स्वचालित रूप से Localizations को Widget Tree में पास करता है, जिससे वे कॉन्टेक्स्ट के माध्यम से सुलभ हो जाते हैं।

• flutter_localizations — Material विजेट्स और सिस्टम स्ट्रिंग्स को स्थानीयकृत करने के लिए आधिकारिक पैकेज।
• intl — अंतर्राष्ट्रीयकरण के लिए पैकेज: संख्याओं, तिथियों, मुद्राओं और बहुवचन का फ़ॉर्मेटिंग।
• ARB फ़ाइलें — स्थानीयकृत स्ट्रिंग्स को संग्रहीत करने का प्रारूप, जो flutter_localizations और intl द्वारा उपयोग किया जाता है।

MaterialApp बनाम CupertinoApp बनाम WidgetsApp

Flutter विभिन्न प्लेटफ़ॉर्म के लिए तीन रूट विजेट प्रदान करता है: MaterialApp (Android और वेब के लिए Material Design), CupertinoApp (iOS शैली) और WidgetsApp (बिना स्टाइलिंग के मूल विजेट)। रूट विजेट का चुनाव पूरे एप्लिकेशन की उपस्थिति और प्लेटफ़ॉर्म-विशिष्ट घटकों की उपलब्धता निर्धारित करता है।

MaterialApp: सार्वभौमिक विकल्प

MaterialApp Material Design समर्थन के कारण अधिकांश एप्लिकेशन के लिए उपयुक्त है, जो Android, वेब और डेस्कटॉप पर बहुत अच्छा दिखता है। Material Design एक समृद्ध घटक लाइब्रेरी प्रदान करता है: Scaffold, AppBar, BottomNavigationBar, Drawer, SnackBar, Dialog और कई अन्य। MaterialApp डायनामिक रंगों के साथ Material 3 का भी समर्थन करता है।

CupertinoApp: iOS शैली

CupertinoApp Cupertino Design का उपयोग करता है, जो Apple के Human Interface Guidelines का पालन करता है। यह CupertinoPageScaffold, CupertinoNavigationBar, CupertinoTabBar और अन्य iOS-शैली के घटक प्रदान करता है। iOS एप्लिकेशन या सभी प्लेटफ़ॉर्म पर Apple शैली का पालन करने वाले एप्लिकेशन के लिए CupertinoApp का उपयोग करें।

WidgetsApp: न्यूनतम जड़

WidgetsApp बिना स्टाइलिंग के मूल रूट विजेट है। यह Navigator, MediaQuery और Localizations जोड़ता है, लेकिन थीम या Material/Cupertino घटक प्रदान नहीं करता है। WidgetsApp कस्टम डिज़ाइन सिस्टम, गेम या अपनी स्वयं की स्टाइलिंग वाले एप्लिकेशन के लिए उपयुक्त है जहाँ Material या Cupertino अत्यधिक है।