Expanded: یہ کیا ہے اور Flutter میں کیسے کام کرتا ہے

Expanded کیا ہے

Expanded ایک ریپر ویجیٹ ہے جو ایک چائلڈ لیتا ہے اور اسے Flex کنٹینر (Row, Column, Flex) میں دستیاب جگہ بھرنے کے لیے پھیلنے پر مجبور کرتا ہے۔ Expanded کا اپنا کوئی بصری نمائندگی نہیں ہے — یہ صرف چائلڈ عنصر کو منتقل کردہ رکاوٹوں (constraints) کا انتظام کرتا ہے۔

Expanded کے مرکز میں Flutter فریم ورک کے ذریعہ فراہم کردہ Flex میکانزم ہے۔ جب Row یا Column اپنے بچوں کے سائز کا حساب لگاتے ہیں، تو وہ پہلے غیر لچکدار عناصر (مقررہ سائز والے عام ویجٹس) کو جگہ مختص کرتے ہیں، پھر باقی جگہ کو Expanded اور Flexible بچوں کے درمیان ان کے flex عنصر کے تناسب سے تقسیم کرتے ہیں۔

Expanded استعمال کرتا ہے Flexible.fit = FlexFit.tight۔ اس کا مطلب ہے کہ Expanded کے چائلڈ کو تمام مختص کردہ جگہ پر قبضہ کرنا ضروری ہے، چاہے اس کا اپنا سائز چھوٹا ہو۔ Fit.loose والے Flexible کے برعکس، جہاں چائلڈ مختص کردہ جگہ سے چھوٹا ہو سکتا ہے، Expanded زبردستی مواد کو پھیلاتا ہے۔

خلاصہ: Expanded Flutter میں متناسب لے آؤٹ بنانے کا بنیادی ذریعہ ہے۔ اسے استعمال کریں جب آپ کو ضرورت ہو کہ کوئی عنصر یقینی طور پر تمام دستیاب چوڑائی یا اونچائی بھرے۔

Expanded بمقابلہ Flexible: اہم فرق

Expanded اور Flexible دونوں Flex کنٹینرز میں جگہ تقسیم کرتے ہیں، لیکن بنیادی طور پر مختلف رویہ رکھتے ہیں۔ فرق fit خاصیت میں ہے، جو طے کرتی ہے کہ چائلڈ دستیاب جگہ سے چھوٹا ہو سکتا ہے یا نہیں۔

Expanded کا ایک سخت رویہ ماڈل ہے: اس کا fit برابر ہے FlexFit.tight۔ اس کا مطلب ہے کہ چائلڈ ویجیٹ کو دستیاب جگہ کے برابر رکاوٹیں ملتی ہیں — نہ زیادہ، نہ کم۔ اگر چائلڈ چھوٹا ہے تو یہ پھیلتا ہے، اگر بڑا ہے تو سکڑتا ہے۔ 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 رکھتا ہے، تو رکاوٹوں کا تصادم ہو سکتا ہے۔ حل: نیسٹنگ کی گہرائی محدود کریں یا درمیانی سطحوں پر واضح طور پر جہات متعین کرنے کے لیے ConstrainedBox استعمال کریں۔

خلاصہ: Expanded کو صحیح والد سیاق و سباق کی ضرورت ہے۔ ہمیشہ چیک کریں کہ Expanded براہ راست Row، Column یا Flex میں رکھا گیا ہے، اور واضح جہات کے بغیر نیسٹنگ سے بچیں۔