MediaQuery — co to je, princip fungování a adaptivní rozvržení

Co je MediaQuery

MediaQuery — je widget a třída Flutter, která poskytuje data o mediálním prostředí aplikace. MediaQuery obaluje celou aplikaci v kořenovém widgetu MaterialApp nebo CupertinoApp a jakýkoli podřízený widget má přístup k těmto datům přes MediaQuery.of(context).

Když Flutter spustí aplikaci, vytvoří instanci MediaQueryData obsahující všechny metriky aktuálního zařízení. Tato data se automaticky aktualizují při změnách: otočení zařízení, změna velikosti okna (na desktopu), objevení klávesnice nebo změna systémových nastavení přístupnosti. MediaQuery přestavuje podstrom widgetů při každé změně dat, zajišťuje reaktivní přizpůsobení rozhraní.

MediaQueryData zahrnuje: size (velikost obrazovky), devicePixelRatio (hustota pixelů), textScaleFactor (měřítko písma z systémových nastavení), viewInsets (oblast zakrytá klávesnicí), viewPadding (systémové okraje), orientation (orientace) a platformBrightness (světlé nebo tmavé téma).

Závěr: MediaQuery — centrální zdroj informací o zařízení ve Flutter. Přístup k MediaQuery.of(context) je prvním krokem při vytváření jakéhokoli adaptivního rozhraní.

Hlavní vlastnosti MediaQueryData

MediaQueryData obsahuje desítky vlastností, ale nejčastěji používané jsou ty, které ovlivňují tvorbu rozvržení. Pojďme se podívat na klíčové.

Size — velikost obrazovky

MediaQuery.of(context).size vrací objekt Size s šířkou a výškou obrazovky v logických pixelech (device-independent pixels, dip). Tyto hodnoty nezohledňují systémové okraje. Pro výpočty adaptivních rozvržení je size hlavní metrikou: na jeho základě se určují breakpoints pro mobilní, tabletové a desktopové rozvržení.

ViewPadding — systémové okraje

ViewPadding — okraje, které systém rezervuje pro stavový řádek, notch (výřez v obrazovce), systémový navigační panel a indikátor domova (na iOS). Bez zohlednění těchto okrajů může obsah skončit pod systémovými prvky. MediaQuery.of(context).padding vrací EdgeInsets, který je třeba aplikovat jako padding na kořenový kontejner stránky.

ViewInsets — oblast klávesnice

ViewInsets — oblast obrazovky zakrytá softwarovou klávesnicí. Pro vstupní pole je kritické sledovat viewInsets.bottom, aby se obsah zvedl nad klávesnici. Flutter to automaticky zpracovává ve scaffold, ale pro vlastní rozvržení je třeba použít přímo MediaQuery.of(context).viewInsets.

Orientation — orientace zařízení

Orientation — vertikální (portrait) nebo horizontální (landscape) orientace. Určuje se porovnáním šířky a výšky: pokud je šířka menší než výška — portrait, jinak — landscape. V produkčním kódu se orientace používá pro přepínání mezi vertikálním a horizontálním uspořádáním prvků.

Závěr: čtyři klíčové vlastnosti — size, viewPadding, viewInsets a orientation — pokrývají 90% úkolů adaptivního designu. Ostatní vlastnosti (textScaleFactor, platformBrightness, devicePixelRatio) se používají pro specifické scénáře.

Použití MediaQuery pro adaptivní rozvržení

MediaQuery — základ adaptivního designu ve Flutter. Pomocí něj se určují breakpoints, rozvržení se mění podle velikosti obrazovky a okraje se přizpůsobují pro různá zařízení.

Typický scénář: mobilní aplikace má zobrazit seznam produktů. Na telefonu (šířka < 600dp) — jeden sloupec. Na tabletu (šířka 600–900dp) — dva sloupce. Na desktopu (šířka > 900dp) — tři sloupce. MediaQuery.of(context).size.width umožňuje dynamický výběr počtu sloupců bez samostatné obrazovky pro každý form factor.

Druhý scénář: zohlednění system gesture insets na moderních zařízeních. Na iPhone s Dynamic Island nebo Androidu s gesture navigation zabírají systémové okraje část obrazovky. MediaQuery.of(context).padding vrací správné hodnoty pro každý typ zařízení a Scaffold je automaticky aplikuje přes body. Pro vlastní widgety je třeba padding explicitně předat z MediaQuery.

Třetí scénář: přizpůsobení systémovým nastavením přístupnosti. MediaQuery.of(context).textScaleFactor ukazuje, jak moc uživatel zvětšil písmo v nastavení. Při textScaleFactor > 1.3 se rozvržení může rozbít — dlouhé texty přesahují okraje karet. Adaptivní rozvržení by to měla zohlednit a v případě potřeby přepnout na jednodušší rozvržení.

Závěr: MediaQuery — nejen zdroj metrik, ale nástroj pro vytváření skutečně adaptivních rozhraní. Používejte jej pro breakpoints, safe area a zohlednění přístupnosti.

Příklady kódu s MediaQuery

Příklad 1 ukazuje získání velikosti obrazovky a aplikaci breakpoints pro výběr počtu sloupců.

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

Výše uvedený příklad ukazuje funkci výběru počtu sloupců na základě šířky obrazovky. Breakpoints 600 a 900 odpovídají obecně přijatým standardům Material Design pro telefony, tablety a desktop.

Příklad 2 — použití MediaQuery s viewPadding pro správné umístění obsahu s ohledem na systémové okraje.

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

V tomto příkladu padding obaluje obsah do Padding pomocí systémových okrajů. top zohledňuje stavový řádek a notch, left/right — bezpečné zóny. bottom není zahrnut, protože Scaffold obvykle zpracovává dolní navigaci sám.

Příklad 3 — určení orientace a změna uspořádání prvků.

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

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

V portrait režimu jsou prvky uspořádány vertikálně (Column), v landscape — horizontálně (Row). Tento přístup poskytuje nejlepší využití prostoru při otočení zařízení.

Závěr: MediaQuery — hlavní nástroj pro vytváření adaptivních rozvržení. Vždy zohledňujte systémové okraje, breakpoints a orientaci při vývoji Flutter rozhraní.

Typické chyby při práci s MediaQuery

Chyba 1: volání MediaQuery.of(context) mimo kontext, kde je MediaQuery nastaven. Pokud je widget nad MediaQuery ve stromu, volání vede k chybě běhu. Řešení: vždy volejte MediaQuery.of(context) uvnitř widgetů obalených MaterialApp nebo CupertinoApp, kde je MediaQuery nastaven jako kořenový widget.

Chyba 2: zapomínání na safe area. Vývojáři používají MediaQuery.size pro umístění prvků bez zohlednění systémových okrajů. Na zařízeních s notch nebo gesture navigation končí obsah pod stavovým řádkem. Řešení: odečtěte MediaQuery.of(context).padding od souřadnic umístění.

Chyba 3: pevné vázání na velikosti. Použití MediaQuery.of(context).size.width pro nastavení přesných velikostí prvků (width: size.width * 0.3) funguje pouze na zařízeních stejného form factoru. Na desktopu nebo tabletu vypadá rozvržení nepřirozeně. Řešení: používejte breakpoints v kombinaci s Expanded a Flexible pro flexibilní rozvržení, ne pevná procenta.

Chyba 4: ignorování textScaleFactor. Při zvýšení systémového písma uživatelem se rozhraní může rozbít — texty přesahují okraje kontejnerů. Řešení: kontrolujte MediaQuery.of(context).textScaleFactor a při hodnotách nad 1.3 přepněte rozvržení na jednodušší verzi s rolováním.

Závěr: MediaQuery — mocný, ale jemný nástroj. Zohledňujte systémové okraje, orientaci a nastavení přístupnosti, aby rozhraní vypadalo správně na všech zařízeních.