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) کارڈ کو نصف دستیاب اونچائی تک کھینچتا ہے۔ دوسرا Flexible (loose) — کارڈ اپنے مواد کے مطابق اونچائی لیتا ہے، اور باقی جگہ خالی رہتی ہے۔ بصری طور پر، دیکھا جا سکتا ہے کہ کس طرح tight زبردستی جگہ بھرتا ہے، جبکہ loose ایک کمپیکٹ سائز محفوظ رکھتا ہے۔

خلاصہ: پروڈکشن کوڈ میں، Flexible with loose فارم فیلڈز، بٹنز اور ٹیکسٹ بلاکس کے لیے استعمال ہوتا ہے۔ Flexible with 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 فیکٹر۔ flex=0 کے ساتھ Flexible ایک غیر لچکدار ویجیٹ کی طرح برتاؤ کرتا ہے، جو بدیہی نہیں ہو سکتا۔ ڈویلپر لچکدار رویے کی توقع رکھتا ہے، لیکن عنصر کم سے کم سائز گھیرتا ہے۔ حل: فعال جگہ کی تقسیم کے لیے flex ≥1 ہونا چاہیے۔

غلطی 4: سائز کی پابندیوں کے بغیر ScrollView کے اندر Flexible۔ اگر Flexible SingleChildScrollView کے اندر Column میں ہے، تو سکرول کنٹینر لامحدود جگہ فراہم کرتا ہے، اور flex تقسیم کام نہیں کرتی۔ حل: SizedBox یا ConstrainedBox استعمال کرکے سکرول کنٹینر کے سائز کو محدود کریں۔

خلاصہ: Flexible کو Expanded کی طرح پیرنٹ سیاق و سباق پر ایک ہی توجہ کی ضرورت ہے۔ فرق صرف fit کا ہے — کام کی بنیاد پر اسے جان بوجھ کر منتخب کریں۔