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 — পোর্ট্রেট বা ল্যান্ডস্কেপ ওরিয়েন্টেশন। এটি প্রস্থ এবং উচ্চতা তুলনা করে নির্ধারিত হয়: যদি প্রস্থ উচ্চতা থেকে কম হয় — পোর্ট্রেট, অন্যথায় — ল্যান্ডস্কেপ। প্রোডাকশন কোডে, ওরিয়েন্টেশন এলিমেন্টের উল্লম্ব এবং অনুভূমিক বিন্যাসের মধ্যে পরিবর্তনের জন্য ব্যবহৃত হয়।

সারসংক্ষেপ: চারটি প্রধান বৈশিষ্ট্য — size, viewPadding, viewInsets এবং orientation — অভিযোজিত ডিজাইনের ৯০% কাজ কভার করে। বাকি বৈশিষ্ট্যগুলি (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-এর সাথে কোড উদাহরণ

উদাহরণ ১ স্ক্রিন সাইজ পাওয়া এবং কলাম সংখ্যা নির্বাচনের জন্য ব্রেকপয়েন্ট প্রয়োগ করা প্রদর্শন করে।

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 মান অনুযায়ী।

উদাহরণ ২ — সিস্টেম মার্জিন বিবেচনা করে সঠিক কন্টেন্ট স্থানের জন্য MediaQuery-এর viewPadding-এর সাথে ব্যবহার।

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 সাধারণত নিচের নেভিগেশন নিজেই হ্যান্ডেল করে।

উদাহরণ ৩ — ওরিয়েন্টেশন নির্ধারণ এবং এলিমেন্ট বিন্যাস পরিবর্তন।

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 নিয়ে কাজ করার সময় সাধারণ ভুল

ভুল ১: MediaQuery.of(context) এমন একটি প্রসঙ্গে কল করা যেখানে MediaQuery সেট করা নেই। যদি কোনো উইজেট ট্রিতে MediaQuery-এর উপরে থাকে, তাহলে কলটি রানটাইম ত্রুটির কারণ হয়। সমাধান: সবসময় MaterialApp বা CupertinoApp-এ মোড়ানো উইজেটের ভিতরে MediaQuery.of(context) কল করুন, যেখানে MediaQuery রুট উইজেট হিসেবে সেট করা আছে।

ভুল ২: সেফ এরিয়া সম্পর্কে ভুলে যাওয়া। ডেভেলপাররা সিস্টেম মার্জিন বিবেচনা না করেই এলিমেন্ট অবস্থানের জন্য MediaQuery.size ব্যবহার করে। নচ বা জেসচার নেভিগেশনযুক্ত ডিভাইসে, কন্টেন্ট স্ট্যাটাস বারের নিচে পড়ে যায়। সমাধান: অবস্থান নির্ধারণ স্থানাঙ্ক থেকে MediaQuery.of(context).padding বিয়োগ করুন।

ভুল ৩: সাইজের সাথে কঠোর সংযুক্তি। এলিমেন্টের সঠিক সাইজ সেট করতে MediaQuery.of(context).size.width ব্যবহার (width: size.width * 0.3) শুধু একই ফর্ম ফ্যাক্টরের ডিভাইসে কাজ করে। ডেস্কটপ বা ট্যাবলেটে, লেআউট অপ্রাকৃতিক দেখায়। সমাধান: কঠোর শতাংশের পরিবর্তে নমনীয় লেআউটের জন্য Expanded এবং Flexible-এর সাথে ব্রেকপয়েন্ট ব্যবহার করুন।

ভুল ৪: textScaleFactor উপেক্ষা করা। যখন ব্যবহারকারী সিস্টেম ফন্ট বাড়ায়, ইন্টারফেস ভেঙে যেতে পারে — টেক্সট কন্টেইনারের সীমানা অতিক্রম করে। সমাধান: MediaQuery.of(context).textScaleFactor চেক করুন এবং ১.৩-এর উপরে মানে স্ক্রলিংসহ সহজ লেআউটে পরিবর্তন করুন।

সারসংক্ষেপ: MediaQuery একটি শক্তিশালী কিন্তু সূক্ষ্ম হাতিয়ার। সিস্টেম মার্জিন, ওরিয়েন্টেশন এবং অ্যাক্সেসিবিলিটি সেটিংস বিবেচনা করুন যাতে ইন্টারফেস সব ডিভাইসে সঠিক দেখায়।