Flexible: यह क्या है, कार्य सिद्धांत और मोबाइल डेवलपमेंट में कॉन्फ़िगरेशन

Flexible क्या है

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

Flexible उपलब्ध स्थान की गणना करने के लिए Flutter के Flex एल्गोरिदम का उपयोग करता है। पहले, फ्रेमवर्क सभी अनम्य चाइल्ड (Flexible/Expanded के बिना विजेट) से पूछताछ करता है और उनके आंतरिक आकार की गणना करता है। शेष स्थान लचीले चाइल्ड के बीच उनके flex फ़ैक्टर के अनुपात में विभाजित किया जाता है। स्थान आवंटन के बाद, Flexible fit की जाँच करता है — यदि यह loose है, तो चाइल्ड को “आवंटित से बड़ा नहीं” का प्रतिबंध मिलता है, जिससे वह छोटा रह सकता है।

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

सारांश: Flexible का उपयोग करें जब आपको किसी तत्व के लिए स्थान आरक्षित करने की आवश्यकता हो लेकिन उसे खिंचने के लिए मजबूर न करना चाहें। यह लचीले लेआउट वितरण को बनाए रखते हुए सामग्री के प्राकृतिक आकार को संरक्षित करता है।

FlexFit.tight बनाम FlexFit.loose

FlexFit दो मानों की एक गणना है: tight और loose। fit का चुनाव यह निर्धारित करता है कि चाइल्ड विजेट को आवंटित स्थान के आकार तक जबरदस्ती खींचा जाएगा या नहीं।

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

FlexFit.loose: चाइल्ड एलिमेंट को loose constraints प्राप्त होते हैं — न्यूनतम आकार 0 है, अधिकतम आवंटित स्थान के बराबर है। चाइल्ड 0 से अधिकतम तक किसी भी आकार का हो सकता है। यदि चाइल्ड छोटा है (उदाहरण के लिए, छोटी स्ट्रिंग वाला Text), तो वह अपनी प्राकृतिक चौड़ाई घेरता है, और शेष स्थान खाली रहता है।

सारांश: FlexFit.loose टेक्स्ट ब्लॉक और प्राकृतिक आकार वाले तत्वों के लिए विकल्प है। FlexFit.tight सख्त कॉलम लेआउट के लिए है जहाँ सभी तत्वों की चौड़ाई या ऊँचाई समान होनी चाहिए।

Expanded के बजाय Flexible का उपयोग कब करें

Flexible और Expanded समान दिखते हैं लेकिन अलग-अलग कार्यों को हल करते हैं। Expanded हमेशा चाइल्ड को पूरे उपलब्ध स्थान को भरने के लिए खींचता है। Flexible चाइल्ड के चारों ओर खाली स्थान छोड़ सकता है यदि सामग्री का आकार आवंटित हिस्से से छोटा है।

Flexible के लिए परिदृश्य: एक Row के अंदर दो बटन हैं। पहला — “खरीदें” (छोटा टेक्स्ट), दूसरा — “कार्ट में जोड़ें” (लंबा टेक्स्ट)। Expanded के साथ, दोनों बटन समान चौड़ाई में खिंचते हैं, और छोटे टेक्स्ट में बड़ा पैडिंग होगा। Flexible के साथ, प्रत्येक बटन अपने टेक्स्ट की चौड़ाई लेता है, और खाली स्थान उनके बीच या किनारों पर रहता है।

Expanded के लिए परिदृश्य: एक Column के अंदर तीन कार्ड हैं जिन्हें सामग्री की परवाह किए बिना समान ऊँचाई घेरनी चाहिए। Expanded उपलब्ध ऊँचाई को समान रूप से विभाजित करता है, और प्रत्येक कार्ड समान आकार में खिंचता है। Flexible loose के साथ यहाँ काम नहीं करेगा — एक छोटा कार्ड छोटा ही रहेगा, जो एकसमान डिज़ाइन को तोड़ देगा।

सारांश: Flexible चुनें जब सामग्री तत्व का आकार निर्धारित करती है और उसके चारों ओर खाली स्थान स्वीकार्य है। Expanded चुनें जब सभी तत्वों का आकार सामग्री की परवाह किए बिना समान होना चाहिए।

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

उदाहरण 1 Row में FlexFit.loose के साथ Flexible के मूल उपयोग को प्रदर्शित करता है।

Row(
  children: [
    Flexible(
      fit: FlexFit.loose,
      child: Container(
        color: Colors.amber,
        child: const Text('छोटा'),
      ),
    ),
    Flexible(
      fit: FlexFit.loose,
      child: Container(
        color: Colors.cyan,
        child: const Text('डेमो के लिए लंबा टेक्स्ट'),
      ),
    ),
  ],
)

उदाहरण में, दोनों Flexible loose fit का उपयोग करते हैं। छोटे टेक्स्ट वाला पहला कंटेनर अपनी प्राकृतिक चौड़ाई घेरता है। लंबे टेक्स्ट वाला दूसरा — अपनी। Row प्रत्येक को आधी उपलब्ध चौड़ाई आवंटित करता है, लेकिन loose fit कंटेनरों को छोटा होने देता है, और खाली स्थान उनके बीच खाली रहता है।

उदाहरण 2 — Column में Tight और Loose fit के साथ Flexible की तुलना।

Column(
  children: [
    Flexible(
      fit: FlexFit.tight,
      child: const Card(
        child: ListTile(
          title: Text('Tight — पूरी ऊंचाई तक खिंचा हुआ'),
        ),
      ),
    ),
    const SizedBox(
      height: 8,
    ),
    Flexible(
      fit: FlexFit.loose,
      child: const Card(
        child: ListTile(
          title: Text('Loose — प्राकृतिक ऊंचाई'),
        ),
      ),
    ),
  ],
)

Column में, पहला Flexible (tight) Card को आधी उपलब्ध ऊँचाई तक खींचता है। दूसरा Flexible (loose) — Card अपनी सामग्री के अनुसार ऊँचाई लेता है, और शेष स्थान खाली रहता है। दृश्य रूप से, आप देख सकते हैं कि कैसे tight जबरदस्ती क्षेत्र भरता है, जबकि loose एक कॉम्पैक्ट आकार बनाए रखता है।

सारांश: प्रोडक्शन कोड में, Flexible loose का उपयोग फॉर्म फ़ील्ड, बटन और टेक्स्ट ब्लॉक के लिए किया जाता है। Flexible tight Expanded के बराबर है और समान वितरण के लिए उपयोग किया जाता है।

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

गलती 1: Flex कंटेनर के बाहर Flexible का उपयोग करना। Expanded की तरह, Flexible LayoutException फेंकता है यदि यह Row, Column या Flex के अंदर नहीं है। समाधान: हमेशा पैरेंट विजेट श्रृंखला की जाँच करें।

गलती 2: Flexible और Expanded में भ्रम। डेवलपर्स अक्सर Expanded का उपयोग करते हैं जब Flexible loose fit की आवश्यकता होती है, और इसके विपरीत। परिणाम: Expanded छोटे टेक्स्ट वाले तत्व को खींचता है, जिससे बड़े खाली मार्जिन बनते हैं। समाधान: यदि तत्व का आकार आवंटित से छोटा हो सकता है — तो Flexible(fit: FlexFit.loose) का उपयोग करें।

गलती 3: शून्य flex फ़ैक्टर। Flexible flex=0 के साथ एक अनम्य विजेट की तरह व्यवहार करता है, जो सहज नहीं हो सकता। डेवलपर लचीले व्यवहार की उम्मीद करता है, लेकिन तत्व न्यूनतम आकार घेरता है। समाधान: सक्रिय स्थान वितरण के लिए flex ≥1 होना चाहिए।

गलती 4: आकार प्रतिबंधों के बिना ScrollView के अंदर Flexible। यदि Flexible SingleChildScrollView के अंदर Column में है, तो स्क्रॉल कंटेनर अनंत स्थान प्रदान करता है, और flex वितरण काम नहीं करता है। समाधान: SizedBox या ConstrainedBox के माध्यम से स्क्रॉल कंटेनर के आकार को प्रतिबंधित करें।

सारांश: Flexible को Expanded की तरह पैरेंट संदर्भ पर समान ध्यान देने की आवश्यकता है। एकमात्र अंतर fit का है — कार्य के आधार पर इसे जानबूझकर चुनें।