MediaQuery — یہ کیا ہے، کام کرنے کا اصول اور موافقت پذیر لے آؤٹ

MediaQuery کیا ہے

MediaQuery Flutter میں ایک ویجٹ اور کلاس ہے جو ایپلیکیشن کے میڈیا ماحول کے بارے میں ڈیٹا فراہم کرتی ہے۔ MediaQuery پوری ایپلیکیشن کو روٹ MaterialApp یا CupertinoApp ویجٹ میں لپیٹ دیتا ہے، اور کوئی بھی چائلڈ ویجٹ MediaQuery.of(context) کے ذریعے اس ڈیٹا تک رسائی حاصل کر سکتا ہے۔

جب Flutter ایپلیکیشن شروع کرتا ہے، تو یہ MediaQueryData کی ایک مثال بناتا ہے جس میں موجودہ ڈیوائس کے تمام میٹرکس ہوتے ہیں۔ یہ ڈیٹا تبدیلیوں پر خود بخود اپ ڈیٹ ہوتا ہے: ڈیوائس گھمانا، ونڈو کا سائز تبدیل کرنا (ڈیسک ٹاپ پر)، کی بورڈ ظاہر ہونا یا سسٹم ایکسیسبیلٹی سیٹنگز میں تبدیلی۔ MediaQuery ڈیٹا میں کسی بھی تبدیلی پر ویجٹ سب ٹری کو دوبارہ تعمیر کرتا ہے، جو ری ایکٹیو انٹرفیس موافقت فراہم کرتا ہے۔

MediaQueryData میں شامل ہیں: size (اسکرین سائز)، devicePixelRatio (پکسل کثافت)، textScaleFactor (سسٹم سیٹنگز سے فونٹ اسکیل)، viewInsets (کی بورڈ سے ڈھکا ہوا علاقہ)، viewPadding (سسٹم مارجن)، orientation (سمت)، اور platformBrightness (ہلکا یا گہرا تھیم)۔

خلاصہ: MediaQuery Flutter میں ڈیوائس کی معلومات کا مرکزی ذریعہ ہے۔ MediaQuery.of(context) تک رسائی کسی بھی موافقت پذیر انٹرفیس کی تعمیر کا پہلا قدم ہے۔

MediaQueryData کی اہم خصوصیات

MediaQueryData میں درجنوں خصوصیات ہیں، لیکن سب سے زیادہ استعمال ہونے والی وہ ہیں جو لے آؤٹ کی تعمیر کو متاثر کرتی ہیں۔ آئیے اہم خصوصیات دیکھتے ہیں۔

Size — اسکرین سائز

MediaQuery.of(context).size ڈیوائس سے آزاد پکسلز (dip) میں اسکرین کی چوڑائی اور اونچائی کے ساتھ ایک Size آبجیکٹ لوٹاتا ہے۔ یہ قدریں سسٹم مارجن کو مدنظر نہیں رکھتیں۔ موافقت پذیر لے آؤٹ حسابات کے لیے، size بنیادی میٹرک ہے: یہ موبائل، ٹیبلیٹ اور ڈیسک ٹاپ لے آؤٹ کے لیے بریک پوائنٹس طے کرتا ہے۔

ViewPadding — سسٹم مارجن

ViewPadding وہ مارجن ہیں جو سسٹم اسٹیٹس بار، نوچ (اسکرین کٹ آؤٹ)، سسٹم نیویگیشن پینل اور ہوم انڈیکیٹر (iOS پر) کے لیے مختص کرتا ہے۔ ان مارجن کو مدنظر رکھے بغیر، مواد سسٹم ایلیمنٹس کے نیچے آ سکتا ہے۔ MediaQuery.of(context).padding ایک EdgeInsets لوٹاتا ہے جسے صفحہ کے روٹ کنٹینر پر پیڈنگ کے طور پر لگانا چاہیے۔

ViewInsets — کی بورڈ کا علاقہ

ViewInsets اسکرین کا وہ علاقہ ہے جو سافٹ ویئر کی بورڈ سے ڈھکا ہوتا ہے۔ ان پٹ فیلڈز کے لیے، مواد کو کی بورڈ کے اوپر اٹھانے کے لیے viewInsets.bottom کی نگرانی کرنا ضروری ہے۔ Flutter اسے اسکیفولڈ میں خود بخود ہینڈل کرتا ہے، لیکن کسٹم لے آؤٹ کے لیے آپ کو براہ راست MediaQuery.of(context).viewInsets استعمال کرنا ہوگا۔

Orientation — ڈیوائس کی سمت

Orientation — عمودی (portrait) یا افقی (landscape) سمت۔ یہ چوڑائی اور اونچائی کا موازنہ کرکے طے کیا جاتا ہے: اگر چوڑائی اونچائی سے کم ہے — عمودی، ورنہ — افقی۔ پروڈکشن کوڈ میں، سمت کا استعمال ایلیمنٹس کی عمودی اور افقی ترتیب کے درمیان سوئچ کرنے کے لیے کیا جاتا ہے۔

خلاصہ: چار اہم خصوصیات — size، viewPadding، viewInsets اور orientation — موافقت پذیر ڈیزائن کے 90% کاموں کو کور کرتی ہیں۔ باقی خصوصیات (textScaleFactor، platformBrightness، devicePixelRatio) مخصوص منظرناموں کے لیے استعمال ہوتی ہیں۔

موافقت پذیر لے آؤٹ کے لیے MediaQuery کا استعمال

MediaQuery Flutter میں موافقت پذیر ڈیزائن کی بنیاد ہے۔ اس کے ذریعے بریک پوائنٹس طے کیے جاتے ہیں، اسکرین سائز کے مطابق لے آؤٹ تبدیل کیا جاتا ہے اور مختلف ڈیوائسز کے لیے مارجن ایڈجسٹ کیے جاتے ہیں۔

عام منظرنامہ: ایک موبائل ایپ کو مصنوعات کی فہرست دکھانی ہے۔ فون پر (چوڑائی < 600dp) — ایک کالم۔ ٹیبلیٹ پر (چوڑائی 600–900dp) — دو کالم۔ ڈیسک ٹاپ پر (چوڑائی > 900dp) — تین کالم۔ MediaQuery.of(context).size.width ہر فارم فیکٹر کے لیے علیحدہ اسکرین کے بغیر کالموں کی تعداد کو متحرک طور پر منتخب کرنے کی اجازت دیتا ہے۔

دوسرا منظرنامہ: جدید ڈیوائسز پر سسٹم جیسچر انسیٹس کو مدنظر رکھنا۔ Dynamic Island والے iPhone یا جیسچر نیویگیشن والے Android پر، سسٹم مارجن اسکرین کا کچھ حصہ کھا جاتے ہیں۔ MediaQuery.of(context).padding ہر ڈیوائس کی قسم کے لیے درست قدریں لوٹاتا ہے، اور Scaffold انہیں body کے ذریعے خود بخود لاگو کرتا ہے۔ کسٹم ویجٹ کے لیے، آپ کو MediaQuery سے پیڈنگ واضح طور پر پاس کرنی ہوگی۔

تیسرا منظرنامہ: سسٹم ایکسیسبیلٹی سیٹنگز کے مطابق ڈھلنا۔ MediaQuery.of(context).textScaleFactor دکھاتا ہے کہ صارف نے سیٹنگز میں فونٹ سائز کتنا بڑھایا ہے۔ textScaleFactor > 1.3 پر، لے آؤٹ ٹوٹ سکتا ہے — لمبا متن کارڈ کی حدود سے باہر نکل جاتا ہے۔ موافقت پذیر لے آؤٹ کو اسے مدنظر رکھنا چاہیے اور اگر ضروری ہو تو آسان لے آؤٹ پر سوئچ کرنا چاہیے۔

خلاصہ: MediaQuery صرف میٹرکس کا ذریعہ نہیں ہے بلکہ حقیقی معنوں میں موافقت پذیر انٹرفیس بنانے کا ایک آلہ ہے۔ بریک پوائنٹس، محفوظ علاقے اور ایکسیسبیلٹی کے تحفظات کے لیے اسے استعمال کریں۔

MediaQuery کے ساتھ کوڈ کی مثالیں

مثال 1 اسکرین سائز حاصل کرنے اور کالموں کی تعداد منتخب کرنے کے لیے بریک پوائنٹس لاگو کرنے کا مظاہرہ کرتی ہے۔

int getColumnCount(BuildContext context) {
  final width = MediaQuery.of(context).size.width;
  if (width > 900) return 3;
  if (width > 600) return 2;
  return 1;
}

اوپر دی گئی مثال اسکرین کی چوڑائی کی بنیاد پر کالموں کی تعداد منتخب کرنے کا فنکشن دکھاتی ہے۔ بریک پوائنٹس 600 اور 900 فون، ٹیبلیٹ اور ڈیسک ٹاپ کے لیے عام طور پر قبول شدہ Material Design معیارات کے مطابق ہیں۔

مثال 2 — سسٹم مارجن کو مدنظر رکھتے ہوئے درست مواد کی جگہ کے لیے viewPadding کے ساتھ MediaQuery کا استعمال۔

Widget build(BuildContext context) {
  final padding = MediaQuery.of(context).padding;

  return Padding(
    padding: EdgeInsets.only(
      top: padding.top,
      left: padding.left,
      right: padding.right,
    ),
    child: const MyContent(),
  );
}

اس مثال میں، padding سسٹم مارجن کا استعمال کرتے ہوئے مواد کو Padding میں لپیٹتا ہے۔ top اسٹیٹس بار اور نوچ کو مدنظر رکھتا ہے، left/right محفوظ علاقوں کو۔ bottom شامل نہیں ہے کیونکہ Scaffold عام طور پر نیچے کی نیویگیشن خود ہینڈل کرتا ہے۔

مثال 3 — سمت کا تعین اور ایلیمنٹ کی ترتیب تبدیل کرنا۔

Widget build(BuildContext context) {
  final isPortrait = MediaQuery.of(context).orientation == Orientation.portrait;

  return isPortrait
      ? const Column(
          children: [HeaderBanner(), ContentList()],
        )
      : const Row(
          children: [HeaderBanner(), ContentList()],
        );
}

عمودی موڈ میں، ایلیمنٹ عمودی طور پر (Column) ترتیب دیے جاتے ہیں؛ افقی موڈ میں، افقی طور پر (Row)۔ یہ طریقہ ڈیوائس گھمانے پر جگہ کا بہترین استعمال دیتا ہے۔

خلاصہ: MediaQuery موافقت پذیر لے آؤٹ بنانے کا اہم آلہ ہے۔ Flutter انٹرفیس تیار کرتے وقت ہمیشہ سسٹم مارجن، بریک پوائنٹس اور سمت کو مدنظر رکھیں۔

MediaQuery کے ساتھ کام کرتے وقت عام غلطیاں

غلطی 1: MediaQuery.of(context) کو ایسے سیاق و سباق میں کال کرنا جہاں MediaQuery سیٹ نہ ہو۔ اگر کوئی ویجٹ درخت میں MediaQuery سے اوپر ہے تو کال رن ٹائم ایرر کا سبب بنتی ہے۔ حل: ہمیشہ MaterialApp یا CupertinoApp میں لپٹے ویجٹ کے اندر MediaQuery.of(context) کال کریں، جہاں MediaQuery روٹ ویجٹ کے طور پر سیٹ ہو۔

غلطی 2: محفوظ علاقہ بھولنا۔ ڈویلپر سسٹم مارجن کو مدنظر رکھے بغیر ایلیمنٹ کی پوزیشننگ کے لیے MediaQuery.size استعمال کرتے ہیں۔ نوچ یا جیسچر نیویگیشن والے ڈیوائسز پر، مواد اسٹیٹس بار کے نیچے آ جاتا ہے۔ حل: پوزیشننگ کوآرڈینیٹس سے MediaQuery.of(context).padding منہا کریں۔

غلطی 3: سائز سے سخت وابستگی۔ ایلیمنٹ کے صحیح سائز سیٹ کرنے کے لیے MediaQuery.of(context).size.width کا استعمال (width: size.width * 0.3) صرف ایک ہی فارم فیکٹر والے ڈیوائسز پر کام کرتا ہے۔ ڈیسک ٹاپ یا ٹیبلیٹ پر، لے آؤٹ غیر فطری لگتا ہے۔ حل: سخت فیصد کے بجائے لچکدار لے آؤٹ کے لیے Expanded اور Flexible کے ساتھ بریک پوائنٹس استعمال کریں۔

غلطی 4: textScaleFactor کو نظر انداز کرنا۔ جب صارف سسٹم فونٹ بڑھاتا ہے تو انٹرفیس ٹوٹ سکتا ہے — متن کنٹینر کی حدود سے باہر نکل جاتا ہے۔ حل: MediaQuery.of(context).textScaleFactor چیک کریں اور 1.3 سے اوپر کی قدروں پر اسکرولنگ کے ساتھ آسان لے آؤٹ پر سوئچ کریں۔

خلاصہ: MediaQuery ایک طاقتور لیکن نازک آلہ ہے۔ اس بات کو یقینی بنانے کے لیے کہ انٹرفیس تمام ڈیوائسز پر درست نظر آئے، سسٹم مارجن، سمت اور ایکسیسبیلٹی سیٹنگز کو مدنظر رکھیں۔