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% کیسز میں کور اثرات کے لیے استعمال ہوتا ہے جب چائلڈ ویجیٹ کو پورے کنٹینر کو بھرنا چاہیے۔

دیگر Flutter لے آؤٹ ویجیٹس سے Stack کا موازنہ

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 متن کے ارد گرد جگہ بناتا ہے تاکہ نمبر دائرے کے کنارے کو نہ چھوئے۔