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 враћа објекат Size са ширином и висином екрана у логичким пикселима (device-independent pixels, dip). Ове вредности не узимају у обзир системске маргине. За прорачуне адаптивних распореда, size је главна метрика: на њеној основи се одређују breakpoints за мобилни, таблет и десктоп распоред.

ViewPadding — системске маргине

ViewPadding — маргине које систем резервише за статус бар, notch (изрез на екрану), системски навигациони панел и индикатор куће (на iOS-у). Без узимања у обзир ових маргина, садржај може завршити испод системских елемената. MediaQuery.of(context).padding враћа EdgeInsets који треба применити као padding на коренски контејнер странице.

ViewInsets — област тастатуре

ViewInsets — област екрана покривена софтверском тастатуром. За поља за унос критично је пратити viewInsets.bottom да би се садржај подигао изнад тастатуре. Flutter ово аутоматски обрађује у scaffold-у, али за прилагођене распореде треба користити директно MediaQuery.of(context).viewInsets.

Orientation — оријентација уређаја

Orientation — портретна (portrait) или пејзажна (landscape) оријентација. Одређује се поређењем ширине и висине: ако је ширина мања од висине — portrait, иначе — landscape. У производном коду, оријентација се користи за пребацивање између вертикалног и хоризонталног распореда елемената.

Закључак: четири кључна својства — size, viewPadding, viewInsets и orientation — покривају 90% задатака адаптивног дизајна. Остала својства (textScaleFactor, platformBrightness, devicePixelRatio) користе се за специфичне сценарије.

Коришћење MediaQuery-ја за адаптивне распореде

MediaQuery — основа адаптивног дизајна у Flutter-у. Преко њега се одређују breakpoints, пребацује layout у зависности од величине екрана и прилагођавају маргине за различите уређаје.

Типичан сценарио: мобилна апликација треба да прикаже листу производа. На телефону (ширина < 600dp) — једна колона. На таблету (ширина 600–900dp) — две колоне. На десктопу (ширина > 900dp) — три колоне. MediaQuery.of(context).size.width омогућава динамички избор броја колона без посебног екрана за сваки форм фактор.

Други сценарио: узимање у обзир system gesture insets на савременим уређајима. На iPhone-у са Dynamic Island или Android-у са gesture navigation, системске маргине заузимају део екрана. MediaQuery.of(context).padding враћа тачне вредности за сваки тип уређаја, а Scaffold их аутоматски примењује преко body. За прилагођене виџете, padding треба експлицитно пренети из MediaQuery-ја.

Трећи сценарио: прилагођавање системским подешавањима приступачности. MediaQuery.of(context).textScaleFactor показује колико је корисник увећао фонт у подешавањима. При textScaleFactor > 1.3 распоред се може покварити — дугачки текстови излазе из граница картица. Адаптивни распореди треба да ово узму у обзир и, по потреби, пребаце на једноставнији распоред.

Закључак: MediaQuery — није само извор метрика, већ алат за изградњу истински адаптивних интерфејса. Користите га за breakpoints, safe area и узимање у обзир приступачности.

Примери кода са MediaQuery-јем

Пример 1 демонстрира добијање величине екрана и примену breakpoints за избор броја колона.

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

Пример изнад приказује функцију избора броја колона на основу ширине екрана. Breakpoints 600 и 900 одговарају општеприхваћеним стандардима Material Design за телефоне, таблете и десктоп.

Пример 2 — коришћење 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 узима у обзир статус бар и notch, 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()],
        );
}

У portrait mode елементи су распоређени вертикално (Column), у landscape — хоризонтално (Row). Овакав приступ даје најбоље искоришћење простора при ротацији уређаја.

Закључак: MediaQuery — главни алат за изградњу адаптивних распореда. Увек узимајте у обзир системске маргине, breakpoints и оријентацију при развоју Flutter интерфејса.

Типичне грешке при раду са MediaQuery-јем

Грешка 1: позивање MediaQuery.of(context) ван контекста где је постављен MediaQuery. Ако се виџет налази изнад MediaQuery-ја у стаблу, позивање доводи до грешке у извршавању. Решење: увек позивати MediaQuery.of(context) унутар виџета обавијених MaterialApp или CupertinoApp, где је MediaQuery постављен као коренски виџет.

Грешка 2: заборављање на safe area. Програмери користе MediaQuery.size за постављање елемената без узимања у обзир системских маргина. На уређајима са notch-ом или gesture navigation, садржај завршава испод статус бара. Решење: одузети MediaQuery.of(context).padding од координата позиционирања.

Грешка 3: чврсто везивање за величине. Коришћење MediaQuery.of(context).size.width за задавање тачних величина елемената (width: size.width * 0.3) ради само на уређајима истог форм фактора. На десктопу или таблету распоред изгледа неприродно. Решење: користити breakpoints у комбинацији са Expanded и Flexible за флексибилан распоред, уместо чврстих процената.

Грешка 4: игнорисање textScaleFactor-а. При повећању системског фонта од стране корисника, интерфејс се може покварити — текстови излазе из граница контејнера. Решење: проверавати MediaQuery.of(context).textScaleFactor и при вредностима изнад 1.3 пребацити распоред на једноставнију верзију са скроловањем.

Закључак: MediaQuery — моћан, али суптилан алат. Узимајте у обзир системске маргине, оријентацију и подешавања приступачности да би интерфејс изгледао исправно на свим уређајима.