MediaQuery — ano ito, prinsipyo ng paggana at mga adaptibong layout

Ano ang MediaQuery

MediaQuery — ay isang widget at klase ng Flutter na nagbibigay ng data tungkol sa media environment ng application. Binabalot ng MediaQuery ang buong application sa root widget na MaterialApp o CupertinoApp, at anumang child widget ay maaaring ma-access ang data na ito sa pamamagitan ng MediaQuery.of(context).

Kapag sinimulan ng Flutter ang application, lumilikha ito ng instance ng MediaQueryData na naglalaman ng lahat ng metrik ng kasalukuyang device. Ang data na ito ay awtomatikong ina-update sa mga pagbabago: pag-ikot ng device, pagbabago ng laki ng window (sa desktop), paglitaw ng keyboard o pagbabago ng system accessibility settings. Ang MediaQuery ay muling nagtatayo ng subtree ng widget sa bawat pagbabago ng data, na tinitiyak ang reaktibong adaptasyon ng interface.

Ang MediaQueryData ay may kasamang: size (laki ng screen), devicePixelRatio (density ng pixel), textScaleFactor (scale ng font mula sa system settings), viewInsets (lugar na natatakpan ng keyboard), viewPadding (mga margin ng system), orientation (oryentasyon) at platformBrightness (maliwanag o madilim na tema).

Konklusyon: MediaQuery — sentral na mapagkukunan ng impormasyon ng device sa Flutter. Ang pag-access sa MediaQuery.of(context) ay unang hakbang sa pagbuo ng anumang adaptibong interface.

Mga Pangunahing Katangian ng MediaQueryData

MediaQueryData ay naglalaman ng dose-dosenang katangian, ngunit ang pinakamadalas gamitin ay ang mga nakakaapekto sa pagbuo ng layout. Suriin natin ang mga pangunahing.

Size — laki ng screen

MediaQuery.of(context).size ay nagbabalik ng Size object na may lapad at taas ng screen sa lohikal na pixel (device-independent pixels, dip). Ang mga halagang ito ay hindi isinasaalang-alang ang mga margin ng system. Para sa pagkalkula ng mga adaptibong layout, ang size ay pangunahing metrik: batay dito, ang mga breakpoints ay tinutukoy para sa mobile, tablet, at desktop layout.

ViewPadding — mga margin ng system

ViewPadding — mga margin na inilalaan ng system para sa status bar, notch (gupit sa screen), system navigation panel, at home indicator (sa iOS). Kung hindi isinasaalang-alang ang mga margin na ito, ang nilalaman ay maaaring mapunta sa ilalim ng mga elemento ng system. Ang MediaQuery.of(context).padding ay nagbabalik ng EdgeInsets na dapat ilapat bilang padding sa root container ng pahina.

ViewInsets — lugar ng keyboard

ViewInsets — lugar ng screen na natatakpan ng software keyboard. Para sa mga input field, mahalagang subaybayan ang viewInsets.bottom upang itaas ang nilalaman sa itaas ng keyboard. Awtomatikong pinangangasiwaan ito ng Flutter sa scaffold, ngunit para sa custom na layout, dapat direktang gamitin ang MediaQuery.of(context).viewInsets.

Orientation — oryentasyon ng device

Orientation — portrait o landscape na oryentasyon. Tinutukoy sa pamamagitan ng paghahambing ng lapad at taas: kung ang lapad ay mas maliit kaysa taas — portrait, kung hindi — landscape. Sa production code, ang oryentasyon ay ginagamit para sa paglipat sa pagitan ng vertical at horizontal na pagkakaayos ng mga elemento.

Konklusyon: apat na pangunahing katangian — size, viewPadding, viewInsets at orientation — sumasaklaw sa 90% ng mga gawain ng adaptibong disenyo. Ang iba pang mga katangian (textScaleFactor, platformBrightness, devicePixelRatio) ay ginagamit para sa mga tiyak na senaryo.

Paggamit ng MediaQuery para sa mga Adaptibong Layout

MediaQuery — batayan ng adaptibong disenyo sa Flutter. Sa pamamagitan nito, tinutukoy ang mga breakpoints, nagbabago ang layout depende sa laki ng screen, at inaayos ang margin para sa iba't ibang device.

Karaniwang senaryo: application mobile ay dapat magpakita ng listahan ng produkto. Sa telepono (lapad < 600dp) — isang column. Sa tablet (lapad 600–900dp) — dalawang column. Sa desktop (lapad > 900dp) — tatlong column. MediaQuery.of(context).size.width ay nagbibigay-daan sa dinamikong pagpili ng bilang ng mga column nang walang hiwalay na screen para sa bawat form factor.

Pangalawang senaryo: pagsasaalang-alang ng system gesture insets sa mga modernong device. Sa iPhone na may Dynamic Island o Android na may gesture navigation, ang mga margin ng system ay kumukuha ng bahagi ng screen. Ang MediaQuery.of(context).padding ay nagbabalik ng tamang halaga para sa bawat uri ng device, at awtomatikong inilalapat ng Scaffold ang mga ito sa pamamagitan ng body. Para sa custom na widget, dapat tahasang ipasa ang padding mula sa MediaQuery.

Pangatlong senaryo: pag-angkop sa system accessibility settings. MediaQuery.of(context).textScaleFactor ay nagpapakita kung gaano pinalaki ng user ang font sa mga setting. Sa textScaleFactor > 1.3, maaaring masira ang layout — mahahabang teksto ay lumalabas sa hangganan ng mga card. Ang mga adaptibong layout ay dapat isaalang-alang ito at, kung kinakailangan, lumipat sa mas simpleng layout.

Konklusyon: MediaQuery — hindi lamang pinagmumulan ng metrik, kundi isang kasangkapan para sa pagbuo ng tunay na adaptibong interface. Gamitin ito para sa breakpoints, safe area, at pagsasaalang-alang ng accessibility.

Mga Halimbawa ng Code gamit ang MediaQuery

Halimbawa 1 ay nagpapakita ng pagkuha ng laki ng screen at paglalapat ng breakpoints para sa pagpili ng bilang ng column.

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

Ang halimbawa sa itaas ay nagpapakita ng function sa pagpili ng bilang ng column batay sa lapad ng screen. Ang breakpoints na 600 at 900 ay tumutugma sa pangkalahatang tinatanggap na mga pamantayan ng Material Design para sa telepono, tablet, at desktop.

Halimbawa 2 — paggamit ng MediaQuery sa viewPadding para sa tamang paglalagay ng nilalaman na isinasaalang-alang ang mga margin ng system.

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(),
  );
}

Sa halimbawang ito, binabalot ng padding ang nilalaman sa Padding, gamit ang mga margin ng system. Ang top ay isinasaalang-alang ang status bar at notch, left/right — mga safe zone. Ang bottom ay hindi kasama dahil ang Scaffold ay karaniwang humahawak ng sarili sa ilalim na nabigasyon.

Halimbawa 3 — pagtukoy ng oryentasyon at pagbabago ng pagkakaayos ng elemento.

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

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

Sa portrait mode, ang mga elemento ay nakaayos nang patayo (Column), sa landscape — pahalang (Row). Ang diskarteng ito ay nagbibigay ng pinakamahusay na paggamit ng espasyo kapag pinaikot ang device.

Konklusyon: MediaQuery — pangunahing kasangkapan para sa pagbuo ng mga adaptibong layout. Palaging isaalang-alang ang mga margin ng system, breakpoints, at oryentasyon sa pag-develop ng Flutter interface.

Mga Karaniwang Pagkakamali sa Paggamit ng MediaQuery

Pagkakamali 1: pagtawag ng MediaQuery.of(context) sa labas ng konteksto kung saan naka-set ang MediaQuery. Kung ang widget ay nasa itaas ng MediaQuery sa puno, ang pagtawag ay nagdudulot ng runtime error. Solusyon: palaging tawagin ang MediaQuery.of(context) sa loob ng widget na nakabalot sa MaterialApp o CupertinoApp, kung saan ang MediaQuery ay naka-set bilang root widget.

Pagkakamali 2: pagkalimot sa safe area. Ginagamit ng mga developer ang MediaQuery.size para sa paglalagay ng elemento nang hindi isinasaalang-alang ang mga margin ng system. Sa mga device na may notch o gesture navigation, ang nilalaman ay napupunta sa ilalim ng status bar. Solusyon: ibawas ang MediaQuery.of(context).padding mula sa mga coordinate ng pagpoposisyon.

Pagkakamali 3: matibay na pagkakabit sa laki. Ang paggamit ng MediaQuery.of(context).size.width para sa pagtukoy ng eksaktong laki ng elemento (width: size.width * 0.3) ay gumagana lamang sa mga device ng isang form factor. Sa desktop o tablet, ang layout ay mukhang hindi natural. Solusyon: gumamit ng breakpoints kasama ang Expanded at Flexible para sa flexible na layout, hindi matitigas na porsyento.

Pagkakamali 4: pagwawalang-bahala sa textScaleFactor. Kapag pinalaki ng user ang system font, maaaring masira ang interface — lumalabas ang teksto sa hangganan ng container. Solusyon: suriin ang MediaQuery.of(context).textScaleFactor at sa mga halagang higit sa 1.3, ilipat ang layout sa mas simpleng bersyon na may scrolling.

Konklusyon: MediaQuery — makapangyarihan ngunit maselan na kasangkapan. Isaalang-alang ang mga margin ng system, oryentasyon, at accessibility setting upang ang interface ay magmukhang tama sa lahat ng device.