Expanded: यह क्या है और Flutter में कैसे काम करता है

Expanded क्या है

Expanded एक रैपर विजेट है जो चाइल्ड लेता है और उसे Flex कंटेनर (Row, Column, Flex) में उपलब्ध स्थान भरने के लिए फैलने के लिए मजबूर करता है। Expanded का अपना कोई दृश्य प्रतिनिधित्व नहीं है — यह केवल चाइल्ड एलिमेंट को पास किए गए constraints को प्रबंधित करता है।

Expanded के मूल में Flutter फ्रेमवर्क द्वारा प्रदान किया गया Flex तंत्र है। जब Row या Column अपने बच्चों के आकार की गणना करते हैं, तो वे पहले अनम्य तत्वों (निश्चित आकार वाले सामान्य विजेट) को स्थान आवंटित करते हैं, फिर शेष स्थान को Expanded और Flexible बच्चों के बीच उनके flex फैक्टर के अनुपात में वितरित करते हैं।

Expanded उपयोग करता है Flexible.fit = FlexFit.tight। इसका मतलब है कि Expanded का चाइल्ड सभी आवंटित स्थान पर कब्जा करने के लिए बाध्य है, भले ही उसका अपना आकार छोटा हो। Flexible के Fit.loose के विपरीत, जहां चाइल्ड आवंटित क्षेत्र से छोटा हो सकता है, Expanded सामग्री को जबरदस्ती फैलाता है।

सारांश: Expanded Flutter में आनुपातिक लेआउट बनाने के लिए प्राथमिक उपकरण है। इसका उपयोग करें जब आपको चाहिए कि कोई तत्व सभी उपलब्ध चौड़ाई या ऊंचाई को गारंटीकृत रूप से भरे।

Expanded vs Flexible: मुख्य अंतर

Expanded और Flexible दोनों Flex कंटेनरों में स्थान वितरित करते हैं, लेकिन मौलिक रूप से अलग व्यवहार करते हैं। अंतर fit प्रॉपर्टी में है, जो निर्धारित करती है कि चाइल्ड उपलब्ध स्थान से छोटा हो सकता है या नहीं।

Expanded का एक सख्त व्यवहार मॉडल है: इसका fit बराबर है FlexFit.tight। इसका मतलब है कि चाइल्ड विजेट को उपलब्ध स्थान के बराबर constraints प्राप्त होते हैं — न अधिक, न कम। यदि चाइल्ड छोटा है, तो यह फैलता है। यदि बड़ा है, तो यह सिकुड़ता है। Flexible उपयोग करता है FlexFit.loose, जो चाइल्ड एलिमेंट को आवंटित स्थान के भीतर किसी भी आकार का होने देता है।

व्यवहार में: यदि Row में flex=1 वाले दो Expanded हैं, तो प्रत्येक ठीक आधी चौड़ाई लेगा। यदि आप उन्हें fit.loose वाले Flexible से बदल देते हैं, तो प्रत्येक चाइल्ड आधे से छोटा हो सकता है यदि उसका अपना आकार छोटा है — शेष स्थान खाली रहेगा।

सारांश: सख्त आनुपातिक लेआउट के लिए Expanded का उपयोग करें, Flexible का उपयोग करें जब चाइल्ड उपलब्ध स्थान से छोटा हो सकता है। यदि अनिश्चित हैं — Expanded से शुरू करें, यह अधिक पूर्वानुमानित व्यवहार देता है।

Flex फैक्टर: स्थान कैसे वितरित होता है

Flex फैक्टर (flex पैरामीटर) एक संख्यात्मक मान है जो उपलब्ध स्थान का वह हिस्सा निर्धारित करता है जो Expanded को प्राप्त होगा। डिफ़ॉल्ट रूप से flex=1, जिसका अर्थ है सभी Expanded बच्चों के बीच समान वितरण।

वितरण एल्गोरिदम तीन चरणों में काम करता है। पहला: Flutter सभी अनम्य बच्चों के आंतरिक आकार की गणना करता है। दूसरा: शेष स्थान को सभी flex फैक्टरों के योग से विभाजित किया जाता है। तीसरा: प्रत्येक Expanded को उसके flex फैक्टर को एक flex इकाई के आकार से गुणा करने के बराबर हिस्सा मिलता है।

उदाहरण के लिए, 300px चौड़ी Row में दो Expanded हैं: पहला flex=2 के साथ, दूसरा flex=1 के साथ। खाली स्थान (300px घटा अनम्य बच्चे) को 3 भागों में विभाजित किया गया है। पहले को 2/3 मिलता है, दूसरे को 1/3। यदि कोई अनम्य बच्चे नहीं हैं, तो पहले को 200px मिलता है, दूसरे को 100px।

Flex फैक्टर कोई भी सकारात्मक पूर्णांक हो सकता है। मान 0 एक विशेष मामला है: flex=0 वाला Expanded एक सामान्य अनम्य विजेट की तरह व्यवहार करता है, जो चाइल्ड के आकार के अनुसार न्यूनतम स्थान लेता है। यह व्यवहार Expanded न होने के समतुल्य है।

सारांश: flex फैक्टर लचीले लेआउट बनाने की कुंजी है। समान कॉलम के लिए 1:1, मुख्य और साइडबार क्षेत्र वाले पैनल के लिए 2:1, संकीर्ण नेविगेशन वाले इंटरफ़ेस के लिए 3:1 अनुपात का उपयोग करें।

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

उदाहरण 1 तीन समान कॉलम बनाने के लिए Row में Expanded के मूल उपयोग को दर्शाता है।

Row(
  children: [
    Expanded(
      child: Container(
        color: Colors.red,
      ),
    ),
    Expanded(
      child: Container(
        color: Colors.green,
      ),
    ),
    Expanded(
      child: Container(
        color: Colors.blue,
      ),
    ),
  ],
)

इस उदाहरण में, तीन Expanded (डिफ़ॉल्ट रूप से flex=1) Row की चौड़ाई को समान रूप से विभाजित करते हैं। कंटेनर Row द्वारा निर्धारित पूरी ऊंचाई तक फैलते हैं और समान हिस्से लेते हैं। यह दृष्टिकोण आनुपातिक वितरण के साथ कॉलम-आधारित लेआउट बनाने के लिए सुविधाजनक है।

उदाहरण 2 साइडबार और मुख्य सामग्री के साथ लेआउट बनाने के लिए विभिन्न flex फैक्टरों का उपयोग दिखाता है।

Row(
  children: [
    Expanded(
      flex: 1,
      child: Container(
        color: Colors.grey.200,
        child: const Center(
          child: Text('साइडबार'),
        ),
      ),
    ),
    Expanded(
      flex: 3,
      child: Container(
        color: Colors.white,
        child: const Center(
          child: Text('सामग्री क्षेत्र'),
        ),
      ),
    ),
  ],
)

दूसरा उदाहरण साइडबार (25%) और मुख्य सामग्री क्षेत्र (75%) के साथ एक विशिष्ट लेआउट बनाता है। flex=1 और flex=3 1:3 का अनुपात देते हैं। जब स्क्रीन की चौड़ाई बदलती है, तो अनुपात स्वचालित रूप से संरक्षित होते हैं — यह उत्तरदायी इंटरफ़ेस का आधार है।

सारांश: विभिन्न flex फैक्टरों के साथ Expanded उत्तरदायी लेआउट बनाने के लिए एक मानक उपकरण है। Column में Expanded का संयोजन क्षैतिज और ऊर्ध्वाधर दोनों आनुपातिक व्यवस्था बनाने की अनुमति देता है।

Expanded का उपयोग करते समय सामान्य गलतियाँ

गलती 1: Row, Column या Flex के बाहर Expanded का उपयोग करना। यदि आप Expanded को सीधे Stack, ListView या किसी अन्य गैर-Flex कंटेनर में रखते हैं, तो Flutter LayoutException फेंकता है जिसमें संदेश "Expanded widgets must be placed inside Flex widgets" होता है। समाधान: मूल विजेट की जाँच करें — केवल Row, Column या Flex।

गलती 2: shrinkWrap निर्दिष्ट किए बिना ListView के अंदर Expanded रखना। ListView में डिफ़ॉल्ट रूप से स्क्रॉल दिशा में अनंत ऊंचाई होती है, और Expanded अपने हिस्से की गणना नहीं कर सकता। समाधान: shrinkWrap: true का उपयोग करें या ListView को निश्चित ऊंचाई वाले SizedBox में लपेटें।

गलती 3: कुल flex के साथ कई Expanded उपलब्ध स्थान से अधिक होना। यदि सीमित चौड़ाई वाली Row में Expanded के साथ-साथ बड़े आंतरिक आकार वाले विजेट भी हैं, तो ओवरफ्लो हो सकता है। समाधान: अनम्य बच्चों के न्यूनतम आकार की जाँच करें और यदि आवश्यक हो तो FittedBox या Flex fit का उपयोग करें।

गलती 4: Row के अंदर Column में नेस्टेड Expanded। यदि Column के अंदर एक Expanded में Row के अंदर एक और Expanded है, तो constraints संघर्ष उत्पन्न हो सकता है। समाधान: नेस्टिंग गहराई को सीमित करें या मध्यवर्ती स्तरों पर आयामों को स्पष्ट रूप से सेट करने के लिए ConstrainedBox का उपयोग करें।

सारांश: Expanded को सही मूल संदर्भ की आवश्यकता है। हमेशा जाँचें कि Expanded सीधे Row, Column या Flex में रखा गया है, और स्पष्ट आयामों के बिना नेस्टिंग से बचें।