MediaQuery — यह क्या है, कार्य सिद्धांत और अनुकूली लेआउट

MediaQuery क्या है

MediaQuery Flutter में एक विजेट और क्लास है जो एप्लिकेशन के मीडिया वातावरण के बारे में डेटा प्रदान करता है। MediaQuery पूरे एप्लिकेशन को रूट MaterialApp या CupertinoApp विजेट में लपेटता है, और कोई भी चाइल्ड विजेट MediaQuery.of(context) के माध्यम से इस डेटा तक पहुँच सकता है।

जब Flutter एप्लिकेशन शुरू करता है, तो वह MediaQueryData का एक इंस्टेंस बनाता है जिसमें वर्तमान डिवाइस के सभी मीट्रिक्स होते हैं। यह डेटा परिवर्तनों पर स्वचालित रूप से अपडेट होता है: डिवाइस रोटेशन, विंडो आकार बदलना (डेस्कटॉप पर), कीबोर्ड दिखना या सिस्टम एक्सेसिबिलिटी सेटिंग्स में बदलाव। MediaQuery किसी भी डेटा परिवर्तन पर विजेट सबट्री को पुनर्निर्मित करता है, जिससे रिएक्टिव इंटरफ़ेस अनुकूलन मिलता है।

MediaQueryData में शामिल है: size (स्क्रीन आकार), devicePixelRatio (पिक्सेल घनत्व), textScaleFactor (सिस्टम सेटिंग्स से फ़ॉन्ट स्केल), viewInsets (कीबोर्ड से ढका क्षेत्र), viewPadding (सिस्टम मार्जिन), orientation (ओरिएंटेशन), और platformBrightness (हल्की या गहरी थीम)।

निष्कर्ष: MediaQuery Flutter में डिवाइस जानकारी का केंद्रीय स्रोत है। MediaQuery.of(context) तक पहुँच किसी भी अनुकूली इंटरफ़ेस के निर्माण में पहला कदम है।

MediaQueryData के मुख्य गुण

MediaQueryData में दर्जनों गुण हैं, लेकिन सबसे अधिक उपयोग वे हैं जो लेआउट निर्माण को प्रभावित करते हैं। आइए मुख्य गुणों पर नज़र डालें।

Size — स्क्रीन आकार

MediaQuery.of(context).size डिवाइस-इंडिपेंडेंट पिक्सेल (dip) में स्क्रीन की चौड़ाई और ऊँचाई के साथ एक Size ऑब्जेक्ट लौटाता है। ये मान सिस्टम मार्जिन को ध्यान में नहीं रखते हैं। अनुकूली लेआउट गणनाओं के लिए, size प्राथमिक मीट्रिक है: यह मोबाइल, टैबलेट और डेस्कटॉप लेआउट के लिए ब्रेकपॉइंट निर्धारित करता है।

ViewPadding — सिस्टम मार्जिन

ViewPadding वे मार्जिन हैं जो सिस्टम स्टेटस बार, नॉच (स्क्रीन कटआउट), सिस्टम नेविगेशन पैनल और होम इंडिकेटर (iOS पर) के लिए आरक्षित करता है। इन मार्जिन को ध्यान में रखे बिना, सामग्री सिस्टम तत्वों के नीचे आ सकती है। MediaQuery.of(context).padding एक EdgeInsets लौटाता है जिसे पेज के रूट कंटेनर पर पैडिंग के रूप में लागू किया जाना चाहिए।

ViewInsets — कीबोर्ड क्षेत्र

ViewInsets स्क्रीन का वह क्षेत्र है जो सॉफ़्टवेयर कीबोर्ड से ढका होता है। इनपुट फ़ील्ड के लिए, सामग्री को कीबोर्ड के ऊपर उठाने के लिए viewInsets.bottom की निगरानी करना महत्वपूर्ण है। Flutter स्कैफोल्ड में इसे स्वचालित रूप से संभालता है, लेकिन कस्टम लेआउट के लिए आपको सीधे MediaQuery.of(context).viewInsets का उपयोग करना होगा।

Orientation — डिवाइस ओरिएंटेशन

Orientation — पोर्ट्रेट या लैंडस्केप ओरिएंटेशन। यह चौड़ाई और ऊँचाई की तुलना करके निर्धारित किया जाता है: यदि चौड़ाई ऊँचाई से कम है — पोर्ट्रेट, अन्यथा — लैंडस्केप। प्रोडक्शन कोड में, ओरिएंटेशन का उपयोग तत्वों की ऊर्ध्वाधर और क्षैतिज व्यवस्था के बीच स्विच करने के लिए किया जाता है।

निष्कर्ष: चार मुख्य गुण — size, viewPadding, viewInsets और orientation — अनुकूली डिज़ाइन के 90% कार्यों को कवर करते हैं। शेष गुण (textScaleFactor, platformBrightness, devicePixelRatio) विशिष्ट परिदृश्यों के लिए उपयोग किए जाते हैं।

अनुकूली लेआउट के लिए MediaQuery का उपयोग

MediaQuery Flutter में अनुकूली डिज़ाइन का आधार है। इसके माध्यम से ब्रेकपॉइंट निर्धारित किए जाते हैं, स्क्रीन आकार के अनुसार लेआउट स्विच किया जाता है और विभिन्न उपकरणों के लिए मार्जिन समायोजित किए जाते हैं।

सामान्य परिदृश्य: एक मोबाइल ऐप को उत्पादों की सूची दिखानी है। फ़ोन पर (चौड़ाई < 600dp) — एक कॉलम। टैबलेट पर (चौड़ाई 600–900dp) — दो कॉलम। डेस्कटॉप पर (चौड़ाई > 900dp) — तीन कॉलम। MediaQuery.of(context).size.width प्रत्येक फॉर्म फैक्टर के लिए अलग स्क्रीन के बिना कॉलम की संख्या को गतिशील रूप से चुनने की अनुमति देता है।

दूसरा परिदृश्य: आधुनिक उपकरणों पर सिस्टम जेस्चर इंसेट को ध्यान में रखना। Dynamic Island वाले iPhone या जेस्चर नेविगेशन वाले Android पर, सिस्टम मार्जिन स्क्रीन का कुछ हिस्सा खा जाते हैं। MediaQuery.of(context).padding प्रत्येक डिवाइस प्रकार के लिए सही मान लौटाता है, और Scaffold उन्हें body के माध्यम से स्वचालित रूप से लागू करता है। कस्टम विजेट के लिए, आपको MediaQuery से पैडिंग स्पष्ट रूप से पास करनी होगी।

तीसरा परिदृश्य: सिस्टम एक्सेसिबिलिटी सेटिंग्स के अनुकूल होना। MediaQuery.of(context).textScaleFactor दिखाता है कि उपयोगकर्ता ने सेटिंग्स में फ़ॉन्ट आकार कितना बढ़ाया है। textScaleFactor > 1.3 पर, लेआउट टूट सकता है — लंबे टेक्स्ट कार्ड की सीमाओं से बाहर निकल जाते हैं। अनुकूली लेआउट को इसे ध्यान में रखना चाहिए और यदि आवश्यक हो तो सरल लेआउट पर स्विच करना चाहिए।

निष्कर्ष: MediaQuery केवल मीट्रिक्स का स्रोत नहीं है, बल्कि वास्तव में अनुकूली इंटरफ़ेस बनाने का एक उपकरण है। ब्रेकपॉइंट, सेफ एरिया और एक्सेसिबिलिटी विचारों के लिए इसका उपयोग करें।

MediaQuery के साथ कोड उदाहरण

उदाहरण 1 स्क्रीन आकार प्राप्त करने और कॉलम की संख्या चुनने के लिए ब्रेकपॉइंट लागू करने का प्रदर्शन करता है।

int getColumnCount(BuildContext context) {
  final width = MediaQuery.of(context).size.width;
  if (width > 900) return 3;
  if (width > 600) return 2;
  return 1;
}

उपरोक्त उदाहरण स्क्रीन चौड़ाई के आधार पर कॉलम की संख्या चुनने का फ़ंक्शन दिखाता है। ब्रेकपॉइंट 600 और 900 फ़ोन, टैबलेट और डेस्कटॉप के लिए आम तौर पर स्वीकृत Material Design मानकों के अनुरूप हैं।

उदाहरण 2 — सिस्टम मार्जिन को ध्यान में रखते हुए सही सामग्री स्थान के लिए MediaQuery का viewPadding के साथ उपयोग।

Widget build(BuildContext context) {
  final padding = MediaQuery.of(context).padding;

  return Padding(
    padding: EdgeInsets.only(
      top: padding.top,
      left: padding.left,
      right: padding.right,
    ),
    child: const MyContent(),
  );
}

इस उदाहरण में, padding सिस्टम मार्जिन का उपयोग करके सामग्री को Padding में लपेटता है। top स्टेटस बार और नॉच को ध्यान में रखता है, left/right सुरक्षित क्षेत्रों को। bottom शामिल नहीं है क्योंकि Scaffold आमतौर पर निचले नेविगेशन को स्वयं संभालता है।

उदाहरण 3 — ओरिएंटेशन निर्धारण और तत्व व्यवस्था बदलना।

Widget build(BuildContext context) {
  final isPortrait = MediaQuery.of(context).orientation == Orientation.portrait;

  return isPortrait
      ? const Column(
          children: [HeaderBanner(), ContentList()],
        )
      : const Row(
          children: [HeaderBanner(), ContentList()],
        );
}

पोर्ट्रेट मोड में, तत्व लंबवत (Column) व्यवस्थित होते हैं; लैंडस्केप मोड में, क्षैतिज (Row)। यह दृष्टिकोण डिवाइस घुमाने पर स्थान का सबसे अच्छा उपयोग देता है।

निष्कर्ष: MediaQuery अनुकूली लेआउट बनाने का मुख्य उपकरण है। Flutter इंटरफ़ेस विकसित करते समय हमेशा सिस्टम मार्जिन, ब्रेकपॉइंट और ओरिएंटेशन को ध्यान में रखें।

MediaQuery के साथ काम करते समय सामान्य गलतियाँ

गलती 1: MediaQuery.of(context) को ऐसे संदर्भ में कॉल करना जहाँ MediaQuery सेट न हो। यदि कोई विजेट ट्री में MediaQuery से ऊपर है, तो कॉल रनटाइम त्रुटि का कारण बनता है। समाधान: हमेशा MaterialApp या CupertinoApp में लिपटे विजेट के अंदर MediaQuery.of(context) कॉल करें, जहाँ MediaQuery रूट विजेट के रूप में सेट हो।

गलती 2: सेफ एरिया के बारे में भूलना। डेवलपर सिस्टम मार्जिन को ध्यान में रखे बिना तत्वों को स्थापित करने के लिए MediaQuery.size का उपयोग करते हैं। नॉच या जेस्चर नेविगेशन वाले उपकरणों पर, सामग्री स्टेटस बार के नीचे आ जाती है। समाधान: स्थिति निर्धारण निर्देशांक से MediaQuery.of(context).padding घटाएँ।

गलती 3: आकारों से कठोर जुड़ाव। तत्वों के सटीक आकार निर्धारित करने के लिए MediaQuery.of(context).size.width का उपयोग (width: size.width * 0.3) केवल एक ही फॉर्म फैक्टर वाले उपकरणों पर काम करता है। डेस्कटॉप या टैबलेट पर, लेआउट अप्राकृतिक दिखता है। समाधान: कठोर प्रतिशत के बजाय लचीले लेआउट के लिए Expanded और Flexible के साथ ब्रेकपॉइंट का उपयोग करें।

गलती 4: textScaleFactor को अनदेखा करना। जब उपयोगकर्ता सिस्टम फ़ॉन्ट बढ़ाता है, तो इंटरफ़ेस टूट सकता है — टेक्स्ट कंटेनर की सीमाओं से बाहर निकल जाते हैं। समाधान: MediaQuery.of(context).textScaleFactor जाँचें और 1.3 से ऊपर के मानों पर स्क्रॉलिंग के साथ सरल लेआउट पर स्विच करें।

निष्कर्ष: MediaQuery एक शक्तिशाली लेकिन नाजुक उपकरण है। सुनिश्चित करें कि इंटरफ़ेस सभी उपकरणों पर सही दिखे, इसके लिए सिस्टम मार्जिन, ओरिएंटेशन और एक्सेसिबिलिटी सेटिंग्स को ध्यान में रखें।