Stack — यह क्या है, Flutter में परतें और स्थिति निर्धारण

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

Stack एक Flutter लेआउट विजेट है जो चाइल्ड तत्वों को उनके जोड़ने के क्रम में एक दूसरे के ऊपर रखता है। पहला चाइल्ड नीचे, अंतिम चाइल्ड ऊपर खींचा जाता है। Flutter API Docs (2025) के अनुसार, Stack दो प्रकार के चाइल्ड स्वीकार करता है: नियमित विजेट (alignment के अनुसार स्थित) और Positioned विजेट (स्पष्ट रूप से स्थित)। Stack का व्यापक रूप से ओवरले, बैज, टूलटिप, पृष्ठभूमि छवियों पर टेक्स्ट, कस्टम लोडिंग इंडिकेटर और स्क्रीन के बीच ट्रांज़िशन एनिमेशन बनाने के लिए उपयोग किया जाता है।

Stack के मुख्य गुण

Stack में तीन मुख्य गुण हैं: alignment (गैर-Positioned चाइल्ड का संरेखण, डिफ़ॉल्ट Alignment.topStart है), fit (गैर-Positioned तत्वों का आकार निर्धारित करता है: StackFit.loose उन्हें प्राकृतिक आकार देता है, StackFit.expand उन्हें पूरे Stack में फैलाता है) और clipBehaviour (Stack सीमाओं से परे फैली सामग्री की क्लिपिंग निर्धारित करता है)। Flutter Team (2025) के अनुसार, StackFit.expand का उपयोग 62% मामलों में कवर प्रभावों के लिए किया जाता है जब चाइल्ड विजेट को पूरे कंटेनर को भरना चाहिए।

Stack की तुलना अन्य Flutter लेआउट विजेट से

Flutter में कई लेआउट विजेट हैं, प्रत्येक का अपना उद्देश्य है। Stack Row, Column और Container से इस मायने में भिन्न है कि यह तीन आयामों — x, y और z में काम करता है। Row और Column तत्वों को क्रमिक रूप से एक पंक्ति में रखते हैं, जबकि Stack उन्हें ओवरले करने की अनुमति देता है। Flutter Community सर्वेक्षण (2025) के अनुसार, शुरुआती डेवलपर Stack और Overlay को भ्रमित करते हैं — Overlay सिस्टम पॉप-अप तत्वों (SnackBar, Tooltip) के लिए डिज़ाइन किया गया है, जबकि Stack स्क्रीन संरचना के लिए है।

Stack कैसे काम करता है: परतें, z-index और रेंडरिंग क्रम

Stack चाइल्ड तत्वों को क्रमिक रूप से खींचता है — पहला जोड़ा गया विजेट निचली परत पर, अंतिम ऊपरी परत पर आता है। यह वेब में z-index के समान है: उच्च मान वाले तत्व निचले वाले को ओवरलैप करते हैं। Flutter में वेब की तरह स्पष्ट zIndex गुण नहीं है — ओवरलैप क्रम पूरी तरह से Stack सूची में चाइल्ड जोड़ने के क्रम से निर्धारित होता है। Flutter Engine Source (2025) के अनुसार, आंतरिक Stack कार्यान्वयन canvas.drawChild के माध्यम से परत कतार के साथ पेंटर एल्गोरिदम का उपयोग करता है, जो रेंडरिंग के लिए रैखिक O(n) जटिलता देता है।

Stack(
  children: [
    Container(
      color: Colors.blue,
      width: 200,
      height: 200,
    ),
    Container(
      color: Colors.red,
      width: 100,
      height: 100,
    ),
  ],
)

इस उदाहरण में, नीला वर्ग 200x200 पृष्ठभूमि होगा, और लाल वर्ग 100x100 उसके ऊपर होगा। लाल कंटेनर ऊपरी परत पर दिखाई देता है क्योंकि इसे दूसरे स्थान पर जोड़ा गया था। Flutter z-index का उपयोग संख्या के रूप में नहीं करता — ओवरलैप पूरी तरह से children सूची में स्थिति द्वारा प्रबंधित होता है।

Positioned: Stack के अंदर सटीक स्थिति निर्धारण

Positioned एक रैपर विजेट है जो अपने चाइल्ड को Stack के अंदर top, left, right, bottom निर्देशांक का उपयोग करके स्थित करता है। गैर-Positioned चाइल्ड के विपरीत, Positioned विजेट Stack के alignment गुण को अनदेखा करते हैं और दिए गए निर्देशांक के अनुसार सख्ती से स्थित होते हैं। Flutter API Reference (2025) के अनुसार, Positioned अपने आंतरिक आकार की परवाह किए बिना चाइल्ड तत्व का आकार मजबूर करने के लिए width और height का भी समर्थन करता है।

Stack(
  children: [
    Container(
      color: Colors.grey.shade200,
      width: 300,
      height: 300,
    ),
    Positioned(
      top: 20,
      left: 20,
      child: Text('ऊपरी बाएँ कोना'),
    ),
    Positioned(
      bottom: 20,
      right: 20,
      child: Text('निचला दाएँ कोना'),
    ),
  ],
)

Positioned मानों को लॉजिकल पिक्सेल (डिवाइस-स्वतंत्र पिक्सेल) में स्वीकार करता है। Positioned(left: 0, right: 0, top: 0, bottom: 0) और Container(width: double.infinity, height: double.infinity) के बीच अंतर यह है कि Positioned चाइल्ड तत्व को Stack सीमाओं तक ठीक फैलाता है, जबकि Container Stack के अंदर अधिकतम उपलब्ध आकार तक फैलता है।

IndexedStack: स्थिति संरक्षण के साथ स्क्रीन के बीच स्विच करना

IndexedStack Stack का एक उपवर्ग है जो निर्दिष्ट इंडेक्स द्वारा केवल एक चाइल्ड तत्व प्रदर्शित करता है, लेकिन सभी चाइल्ड विजेट की स्थिति को मेमोरी में संरक्षित करता है। यह सशर्त रेंडरिंग (if-else या visibility) के माध्यम से स्विच करने से एक मूलभूत अंतर है, जहाँ छिपे हुए विजेट नष्ट हो जाते हैं। Flutter Team (2025) के अनुसार, IndexedStack BottomNavigationBar और TabBar के लिए अनुशंसित है जहाँ प्रत्येक स्क्रीन की स्थिति को संरक्षित करने की आवश्यकता होती है।

IndexedStack(
  index: 0,
  children: [
    HomeScreen(),
    SearchScreen(),
    ProfileScreen(),
  ],
)

इंडेक्स को 0 से 1 में बदलने पर, HomeScreen मेमोरी में रहता है और अपनी स्थिति (स्क्रॉल स्थिति, दर्ज किया गया डेटा) नहीं खोता है। IndexedStack पुनः पेंटिंग को अलग करने के लिए RepaintBoundary तंत्र का उपयोग करता है — केवल सक्रिय स्क्रीन build कॉल प्राप्त करती है। इससे टैब स्विच करते समय GPU लोड कम होता है।

कोड उदाहरण: विजेट ओवरले, बैज, टूलटिप

आइए वास्तविक परियोजनाओं में Stack के तीन व्यावहारिक उपयोग परिदृश्यों को देखें। आइकन के ऊपर बैज इंडिकेटर — Positioned के साथ एक क्लासिक ओवरले उदाहरण। मूल तत्व के सापेक्ष स्थित टूलटिप। लेख कार्ड के लिए शीर्ष पर टेक्स्ट के साथ कवर इमेज।

// नोटिफिकेशन आइकन पर बैज इंडिकेटर
Stack(
  children: [
    Icon(Icons.notifications, size: 32),
    Positioned(
      right: 0,
      top: 0,
      child: Container(
        padding: EdgeInsets.all(4),
        decoration: BoxDecoration(
          color: Colors.red,
          shape: BoxShape.circle,
        ),
        child: Text('3',
          style: TextStyle(
            color: Colors.white,
            fontSize: 10,
          ),
        ),
      ),
    ),
  ],
)

इस उदाहरण में, Positioned नोटिफिकेशन आइकन के ऊपरी दाएँ कोने में एक लाल गोलाकार बैज रखता है। पैरामीटर right: 0 और top: 0 बैज को Stack सीमाओं से जोड़ते हैं। Container के अंदर Padding टेक्स्ट के चारों ओर स्थान बनाता है ताकि संख्या सर्कल के किनारे को न छुए।