MediaQuery — bu nima, ishlash prinsipi va adaptiv maketlar

MediaQuery nima

MediaQuery — Flutter-da dasturning media muhiti haqida ma'lumot beruvchi vidjet va sinfdir. MediaQuery butun dasturni MaterialApp yoki CupertinoApp ildiz vidjetida o'rab oladi va har qanday bolak vidjet MediaQuery.of(context) orqali bu ma'lumotlarga kirishi mumkin.

Flutter dasturni ishga tushirganda, joriy qurilmaning barcha metrikalarini o'z ichiga olgan MediaQueryData namunasini yaratadi. Bu ma'lumotlar o'zgarishlar vaqtida avtomatik yangilanadi: qurilma aylantirilganda, oyna o'lchami o'zgarganda (ish stolida), klaviatura paydo bo'lganda yoki tizim imkoniyat sozlamalari o'zgarganda. MediaQuery har ma'lumot o'zgarishida vidjetlarning pastki daraxtini qayta qurib, interfeysning reaktiv moslashishini ta'minlaydi.

MediaQueryData o'z ichiga oladi: size (ekran o'lchami), devicePixelRatio (piksel zichligi), textScaleFactor (tizim sozlamalaridan shrift masshtabi), viewInsets (klaviatura bilan qoplangan maydon), viewPadding (tizim bo'shliqlari), orientation (orientatsiya) va platformBrightness (yorug' yoki qorong'u mavzu).

Natija: MediaQuery — Flutter-da qurilma haqidagi ma'lumotning markaziy manbai. MediaQuery.of(context) ga kirish har qanday adaptiv interfeys qurishning birinchi qadamidir.

MediaQueryData-ning asosiy xususiyatlari

MediaQueryData o'nlab xususiyatlarga ega, ammo eng ko'p maket qurilishiga ta'sir qiladiganlari ishlatiladi. Ulardan asosiylarini ko'rib chiqamiz.

Size — ekran o'lchami

MediaQuery.of(context).size ekranning kengligi va balandligini mantiqiy piksellarda (device-independent pixels, dip) aks ettiruvchi Size obyektini qaytaradi. Bu qiymatlar tizim bo'shliqlarini hisobga olmaydi. Adaptiv maketlarni hisoblash uchun size asosiy metrikadir: uning asosida mobil, planshet va ish stoli maketlari uchun breakpoints aniqlanadi.

ViewPadding — tizim bo'shliqlari

ViewPadding — tizimning status bar, notch (ekrandagi kesik), tizim navigatsiya paneli va uy ko'rsatkichi (iOS-da) uchun ajratgan bo'shliqlari. Bu bo'shliqlar hisobga olinmasa, mazmun tizim elementlari ostida qolishi mumkin. MediaQuery.of(context).padding sahifaning ildiz konteyneriga padding sifatida qo'llanilishi kerak bo'lgan EdgeInsets-ni qaytaradi.

ViewInsets — klaviatura maydoni

ViewInsets — dastur klaviaturasi bilan qoplangan ekran maydoni. Kiritish maydonlari uchun viewInsets.bottom ni kuzatish muhimdir, chunki mazmun klaviaturadan yuqoriga ko'tarilishi kerak. Flutter buni scaffold-da avtomatik boshqaradi, ammo maxsus maketlar uchun to'g'ridan-to'g'ri MediaQuery.of(context).viewInsets dan foydalanish kerak.

Orientation — qurilma orientatsiyasi

Orientation — portret (portrait) yoki landshaft (landscape) orientatsiyasi. Kenglik va balandlikni solishtirish orqali aniqlanadi: kenglik balandlikdan kichik bo'lsa — portrait, aks holda — landscape. Ishlab chiqarish kodida orientatsiya elementlarning vertikal va gorizontal joylashuvi o'rtasida o'tish uchun ishlatiladi.

Natija: to'rtta asosiy xususiyat — size, viewPadding, viewInsets va orientation — adaptiv dizayn vazifalarining 90% ini qamrab oladi. Qolgan xususiyatlar (textScaleFactor, platformBrightness, devicePixelRatio) maxsus stsenariylar uchun ishlatiladi.

Adaptiv maketlar uchun MediaQuery-dan foydalanish

MediaQuery — Flutter-da adaptiv dizaynning asosidir. Uning yordamida breakpoints aniqlanadi, ekran o'lchamiga qarab layout o'zgartiriladi va turli qurilmalar uchun bo'shliqlar sozlanadi.

Tipik stsenariy: mobil dastur mahsulot ro'yxatini ko'rsatishi kerak. Telefonda (kenglik < 600dp) — bir ustun. Planshetda (kenglik 600–900dp) — ikki ustun. Ish stolida (kenglik > 900dp) — uch ustun. MediaQuery.of(context).size.width har bir form faktor uchun alohida ekransiz dinamik ravishda ustunlar sonini tanlash imkonini beradi.

Ikkinchi stsenariy: zamonaviy qurilmalarda system gesture insets-ni hisobga olish. Dynamic Island-li iPhone yoki gesture navigation-li Android-da tizim bo'shliqlari ekranning bir qismini egallaydi. MediaQuery.of(context).padding har bir qurilma turi uchun to'g'ri qiymatlarni qaytaradi va Scaffold ularni body orqali avtomatik qo'llaydi. Maxsus vidjetlar uchun MediaQuery-dan padding aniq tarzda uzatilishi kerak.

Uchinchi stsenariy: tizim imkoniyat sozlamalariga moslashish. MediaQuery.of(context).textScaleFactor foydalanuvchi sozlamalarda shriftni qanchalik oshirganini ko'rsatadi. textScaleFactor > 1.3 bo'lganda maket buzilishi mumkin — uzun matnlar kartalar chegarasidan chiqib ketadi. Adaptiv maketlar buni hisobga olishi va kerak bo'lganda soddaroq maketga o'tishi kerak.

Natija: MediaQuery — shunchaki metrikalar manbai emas, balki haqiqatan ham adaptiv interfeyslar qurish uchun vositadir. Breakpoints, safe area va imkoniyatlarni hisobga olish uchun foydalaning.

MediaQuery bilan kod misollari

Misol 1 ekran o'lchamini olish va ustunlar sonini tanlash uchun breakpoints-ni qo'llashni ko'rsatadi.

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

Yuqoridagi misol ekran kengligiga asoslanib ustunlar sonini tanlash funksiyasini ko'rsatadi. 600 va 900 breakpoints-lari Material Design-ning telefon, planshet va ish stoli uchun umumiy qabul qilingan standartlariga mos keladi.

Misol 2 — tizim bo'shliqlarini hisobga olgan holda mazmunni to'g'ri joylashtirish uchun MediaQuery va viewPadding dan foydalanish.

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

Bu misolda padding mazmunni tizim bo'shliqlaridan foydalangan holda Padding bilan o'rab oladi. top status bar va notch-ni, left/right esa xavfsiz zonalarni hisobga oladi. bottom kiritilmagan, chunki Scaffold odatda pastki navigatsiyani o'zi boshqaradi.

Misol 3 — orientatsiyani aniqlash va elementlarning joylashuvini o'zgartirish.

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

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

Portrait mode-da elementlar vertikal (Column), landscape-da esa gorizontal (Row) joylashadi. Bu yondashuv qurilma aylantirilganda makondan eng yaxshi foydalanishni ta'minlaydi.

Natija: MediaQuery — adaptiv maketlar qurish uchun asosiy vositadir. Flutter interfeyslarini yaratishda har doim tizim bo'shliqlari, breakpoints va orientatsiyani hisobga oling.

MediaQuery bilan ishlashda tipik xatolar

Xato 1: MediaQuery.of(context) ni MediaQuery o'rnatilmagan kontekstda chaqirish. Vidjet daraxtda MediaQuery-dan yuqorida bo'lsa, chaqiruv ish vaqti xatosiga olib keladi. Yechim: har doim MediaQuery.of(context) ni MaterialApp yoki CupertinoApp bilan o'ralgan, MediaQuery ildiz vidjet sifatida o'rnatilgan vidjetlar ichida chaqiring.

Xato 2: safe area ni unutish. Dasturchilar elementlarni joylashtirish uchun tizim bo'shliqlarini hisobga olmasdan MediaQuery.size dan foydalanadilar. Notch yoki gesture navigation bo'lgan qurilmalarda mazmun status bar ostida qoladi. Yechim: MediaQuery.of(context).padding ni joylashtirish koordinatalaridan ayirish.

Xato 3: o'lchamlarga qattiq bog'lanish. Elementlarning aniq o'lchamlarini belgilash uchun MediaQuery.of(context).size.width dan foydalanish (width: size.width * 0.3) faqat bir form faktorli qurilmalarda ishlaydi. Ish stoli yoki planshetda maket tabiiy ko'rinmaydi. Yechim: qattiq foizlar o'rniga moslashuvchan maket uchun Expanded va Flexible bilan birga breakpoints dan foydalaning.

Xato 4: textScaleFactor ni hisobga olmaslik. Foydalanuvchi tizim shriftini oshirganda interfeys buzilishi mumkin — matnlar konteynerlar chegarasidan chiqib ketadi. Yechim: MediaQuery.of(context).textScaleFactor ni tekshiring va qiymat 1.3 dan yuqori bo'lganda maketni aylantirish bilan soddaroq versiyaga o'tkazing.

Natija: MediaQuery — kuchli, ammo nozik vositadir. Interfeys barcha qurilmalarda to'g'ri ko'rinishi uchun tizim bo'shliqlari, orientatsiya va imkoniyat sozlamalarini hisobga oling.