MediaQuery — bu nədir, iş prinsipi və adaptiv maketlər

MediaQuery nədir

MediaQuery — Flutter-də proqramın media mühiti haqqında məlumat verən vidjet və sinifdir. MediaQuery bütün proqramı MaterialApp və ya CupertinoApp kök vidjetində əhatə edir və istənilən uşaq vidjet MediaQuery.of(context) vasitəsilə bu məlumatlara daxil ola bilər.

Flutter proqramı işə saldıqda, cari cihazın bütün metrikalarını ehtiva edən MediaQueryData nümunəsi yaradır. Bu məlumatlar dəyişikliklər zamanı avtomatik yenilənir: cihazın döndərilməsi, pəncərə ölçüsünün dəyişməsi (masaüstündə), klaviaturanın görünməsi və ya sistem əlçatanlıq parametrlərinin dəyişməsi. MediaQuery hər məlumat dəyişikliyində vidjetlərin alt ağacını yenidən quraraq interfeysin reaktiv uyğunlaşmasını təmin edir.

MediaQueryData daxildir: size (ekran ölçüsü), devicePixelRatio (piksel sıxlığı), textScaleFactor (sistem parametrlərindən şrift miqyası), viewInsets (klaviatura ilə örtülən sahə), viewPadding (sistem boşluqları), orientation (oriyentasiya) və platformBrightness (açıq və ya qaranlıq mövzu).

Nəticə: MediaQuery — Flutter-də cihaz haqqında məlumatın mərkəzi mənbəyidir. MediaQuery.of(context)-ə giriş hər hansı adaptiv interfeys qurmağın ilk addımıdır.

MediaQueryData-nın əsas xüsusiyyətləri

MediaQueryData onlarla xüsusiyyətə malikdir, lakin ən çox maketin qurulmasına təsir edənlər istifadə olunur. Onlardan əsaslarını nəzərdən keçirək.

Size — ekran ölçüsü

MediaQuery.of(context).size ekranın eni və hündürlüyünü məntiqi piksellərdə (device-independent pixels, dip) əks etdirən Size obyekti qaytarır. Bu dəyərlər sistem boşluqlarını nəzərə almır. Adaptiv maketlərin hesablanması üçün size əsas metrikadır: onun əsasında mobil, planşet və masaüstü düzənləri üçün breakpoints müəyyən edilir.

ViewPadding — sistem boşluqları

ViewPadding — sistemin status bar, notch (ekrandakı kəsik), sistem naviqasiya paneli və ev göstəricisi (iOS-da) üçün ayırdığı boşluqlar. Bu boşluqlar nəzərə alınmazsa, məzmun sistem elementlərinin altında qala bilər. MediaQuery.of(context).padding səhifənin kök konteynerinə padding kimi tətbiq edilməli olan EdgeInsets qaytarır.

ViewInsets — klaviatura sahəsi

ViewInsets — proqram klaviaturası ilə örtülən ekran sahəsi. Giriş sahələri üçün viewInsets.bottom-i izləmək kritikdir ki, məzmun klaviaturadan yuxarı qaldırılsın. Flutter bunu scaffold-da avtomatik idarə edir, lakin fərdi maketlər üçün birbaşa MediaQuery.of(context).viewInsets istifadə edilməlidir.

Orientation — cihaz oriyentasiyası

Orientation — portret (portrait) və ya landşaft (landscape) oriyentasiyası. En və hündürlüyün müqayisəsi ilə müəyyən edilir: en hündürlükdən kiçikdirsə — portrait, əks halda — landscape. İstehsalat kodunda oriyentasiya elementlərin şaquli və üfüqi düzülüşü arasında keçid üçün istifadə olunur.

Nəticə: dörd əsas xüsusiyyət — size, viewPadding, viewInsets və orientation — adaptiv dizayn tapşırıqlarının 90%-ni əhatə edir. Qalan xüsusiyyətlər (textScaleFactor, platformBrightness, devicePixelRatio) xüsusi ssenarilər üçün istifadə olunur.

Adaptiv maketlər üçün MediaQuery-dən istifadə

MediaQuery — Flutter-də adaptiv dizaynın əsasıdır. Onun vasitəsilə breakpoints müəyyən edilir, ekran ölçüsündən asılı olaraq layout dəyişdirilir və müxtəlif cihazlar üçün boşluqlar tənzimlənir.

Tipik ssenari: mobil proqram məhsul siyahısını göstərməlidir. Telefonda (en < 600dp) — bir sütun. Planşetdə (en 600–900dp) — iki sütun. Masaüstündə (en > 900dp) — üç sütun. MediaQuery.of(context).size.width hər form faktor üçün ayrı ekran olmadan dinamik olaraq sütun sayını seçməyə imkan verir.

İkinci ssenari: müasir cihazlarda system gesture insets-in nəzərə alınması. Dynamic Island-li iPhone və ya gesture navigation-li Android-də sistem boşluqları ekranın bir hissəsini tutur. MediaQuery.of(context).padding hər cihaz növü üçün düzgün dəyərlər qaytarır və Scaffold onları body vasitəsilə avtomatik tətbiq edir. Fərdi vidjetlər üçün MediaQuery-dən padding açıq şəkildə ötürülməlidir.

Üçüncü ssenari: sistem əlçatanlıq parametrlərinə uyğunlaşma. MediaQuery.of(context).textScaleFactor istifadəçinin parametrlərdə şrifti nə qədər artırdığını göstərir. textScaleFactor > 1.3 olduqda maket sına bilər — uzun mətnlər kartların hüdudlarından çıxır. Adaptiv maketlər bunu nəzərə almalı və lazım olduqda daha sadə düzənə keçməlidir.

Nəticə: MediaQuery — sadəcə metrikalar mənbəyi deyil, həqiqətən adaptiv interfeyslər qurmaq üçün alətdir. Breakpoints, safe area və əlçatanlığın nəzərə alınması üçün istifadə edin.

MediaQuery ilə kod nümunələri

Nümunə 1 ekran ölçüsünün əldə edilməsini və sütun sayını seçmək üçün breakpoints-in tətbiqini göstərir.

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

Yuxarıdakı nümunə ekranın eninə əsasən sütun sayını seçən funksiyanı göstərir. 600 və 900 breakpoints-ləri Material Design-in telefon, planşet və masaüstü üçün ümumi qəbul edilmiş standartlarına uyğundur.

Nümunə 2 — sistem boşluqlarını nəzərə alaraq məzmunun düzgün yerləşdirilməsi üçün MediaQuery və viewPadding-dən istifadə.

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 nümunədə padding məzmunu Padding ilə əhatə edir, sistem boşluqlarından istifadə edir. top status bar və notch-i, left/right isə təhlükəsiz zonaları nəzərə alır. bottom daxil edilməyib, çünki Scaffold adətən aşağı naviqasiyanı özü idarə edir.

Nümunə 3 — oriyentasiyanın təyini və elementlərin düzülüşünün dəyişdirilməsi.

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 elementlər şaquli (Column), landscape-də isə üfüqi (Row) düzülür. Bu yanaşma cihaz döndərildikdə məkandan ən yaxşı istifadəni təmin edir.

Nəticə: MediaQuery — adaptiv maketlər qurmaq üçün əsas alətdir. Flutter interfeysləri hazırlayarkən həmişə sistem boşluqlarını, breakpoints-ləri və oriyentasiyanı nəzərə alın.

MediaQuery ilə işdə tipik səhvlər

Səhv 1: MediaQuery.of(context)-in MediaQuery quraşdırılmamış kontekstdə çağırılması. Vidjet ağacda MediaQuery-dən yuxarıdadırsa, çağırış iş vaxtı xətasına səbəb olur. Həll yolu: həmişə MediaQuery.of(context)-i MaterialApp və ya CupertinoApp ilə əhatələnmiş, MediaQuery-nin kök vidjet kimi quraşdırıldığı vidjetlərin daxilində çağırın.

Səhv 2: safe area-nı unutmaq. Tərtibatçılar elementləri yerləşdirmək üçün sistem boşluqlarını nəzərə almadan MediaQuery.size istifadə edirlər. Notch və ya gesture navigation olan cihazlarda məzmun status barın altında qalır. Həll yolu: MediaQuery.of(context).padding-i yerləşdirmə koordinatlarından çıxmaq.

Səhv 3: ölçülərə sərt bağlanma. Elementlərin dəqiq ölçülərini təyin etmək üçün MediaQuery.of(context).size.width istifadə etmək (width: size.width * 0.3) yalnız bir form faktorlu cihazlarda işləyir. Masaüstü və ya planşetdə maket təbii görünmür. Həll yolu: sərt faizlər əvəzinə çevik maket üçün Expanded və Flexible ilə birlikdə breakpoints istifadə edin.

Səhv 4: textScaleFactor-ı nəzərə almamaq. İstifadəçi sistem şriftini artırdıqda interfeys sına bilər — mətnlər konteynerlərin hüdudlarından çıxır. Həll yolu: MediaQuery.of(context).textScaleFactor-ı yoxlayın və dəyər 1.3-dən yuxarı olduqda maketi sürüşdürmə ilə daha sadə düzənə keçirin.

Nəticə: MediaQuery — güclü, lakin incə alətdir. İnterfeysin bütün cihazlarda düzgün görünməsi üçün sistem boşluqlarını, oriyentasiyanı və əlçatanlıq parametrlərini nəzərə alın.