MediaQuery — wat is het, werkingsprincipe en adaptieve layouts

Wat is MediaQuery

MediaQuery — is een widget en klasse in Flutter die gegevens verschaft over de media-omgeving van de applicatie. MediaQuery omhult de hele applicatie in de root-widget MaterialApp of CupertinoApp, en elke onderliggende widget heeft toegang tot deze gegevens via MediaQuery.of(context).

Wanneer Flutter de applicatie start, maakt het een MediaQueryData-instantie aan die alle metrieken van het huidige apparaat bevat. Deze gegevens worden automatisch bijgewerkt bij wijzigingen: draaien van het apparaat, wijzigen van venstergrootte (op desktop), verschijnen van toetsenbord of wijzigen van systeemtoegankelijkheidsinstellingen. MediaQuery herbouwt de subboom van widgets bij elke gegevenswijziging, wat zorgt voor reactieve aanpassing van de interface.

MediaQueryData omvat: size (schermgrootte), devicePixelRatio (pixeldichtheid), textScaleFactor (lettertype schaal uit systeeminstellingen), viewInsets (gebied bedekt door toetsenbord), viewPadding (systeemmarges), orientation (oriëntatie) en platformBrightness (licht of donker thema).

Conclusie: MediaQuery — de centrale bron van apparaatinformatie in Flutter. Toegang tot MediaQuery.of(context) is de eerste stap bij het bouwen van elke adaptieve interface.

Belangrijkste eigenschappen van MediaQueryData

MediaQueryData bevat tientallen eigenschappen, maar de meest gebruikte zijn die welke de lay-out beïnvloeden. Laten we de belangrijkste bekijken.

Size — schermgrootte

MediaQuery.of(context).size retourneert een Size-object met de breedte en hoogte van het scherm in logische pixels (device-independent pixels, dip). Deze waarden houden geen rekening met systeemmarges. Voor het berekenen van adaptieve layouts is size de primaire metriek: op basis hiervan worden breakpoints bepaald voor mobiele, tablet- en desktop lay-outs.

ViewPadding — systeemmarges

ViewPadding — marges die het systeem reserveert voor de statusbalk, notch (uitsparing in het scherm), systeemnavigatiepaneel en home-indicator (op iOS). Zonder deze marges kan inhoud onder systeemelementen terechtkomen. MediaQuery.of(context).padding retourneert EdgeInsets die moet worden toegepast als padding op de root-container van de pagina.

ViewInsets — toetsenbordgebied

ViewInsets — het schermgebied dat wordt bedekt door het softwaretoetsenbord. Voor invoervelden is het cruciaal om viewInsets.bottom te volgen om inhoud boven het toetsenbord te tillen. Flutter behandelt dit automatisch in scaffold, maar voor aangepaste layouts moet direct MediaQuery.of(context).viewInsets worden gebruikt.

Orientation — apparaatoriëntatie

Orientation — staande (portrait) of liggende (landscape) oriëntatie. Bepaald door breedte en hoogte te vergelijken: als de breedte kleiner is dan de hoogte — portrait, anders — landscape. In productiecode wordt oriëntatie gebruikt om te schakelen tussen verticale en horizontale plaatsing van elementen.

Conclusie: vier belangrijke eigenschappen — size, viewPadding, viewInsets en orientation — dekken 90% van de adaptieve ontwerptaken. De overige eigenschappen (textScaleFactor, platformBrightness, devicePixelRatio) worden gebruikt voor specifieke scenario's.

MediaQuery gebruiken voor adaptieve layouts

MediaQuery — de basis van adaptief ontwerp in Flutter. Hiermee worden breakpoints bepaald, wordt de lay-out gewijzigd op basis van schermgrootte en worden marges voor verschillende apparaten aangepast.

Typisch scenario: mobiele applicatie moet een productlijst weergeven. Op telefoon (breedte < 600dp) — één kolom. Op tablet (breedte 600–900dp) — twee kolommen. Op desktop (breedte > 900dp) — drie kolommen. MediaQuery.of(context).size.width maakt dynamische selectie van het aantal kolommen mogelijk zonder apart scherm voor elke vormfactor.

Tweede scenario: rekening houden met system gesture insets op moderne apparaten. Op iPhone met Dynamic Island of Android met gesture navigation nemen systeemmarges een deel van het scherm in beslag. MediaQuery.of(context).padding retourneert correcte waarden voor elk apparaattype en Scaffold past ze automatisch toe via body. Voor aangepaste widgets moet padding expliciet uit MediaQuery worden doorgegeven.

Derde scenario: aanpassen aan systeemtoegankelijkheidsinstellingen. MediaQuery.of(context).textScaleFactor toont hoeveel de gebruiker het lettertype heeft vergroot in de instellingen. Bij textScaleFactor > 1.3 kan de lay-out breken — lange teksten vallen buiten kaartgrenzen. Adaptieve layouts moeten hiermee rekening houden en zo nodig overschakelen naar een eenvoudigere lay-out.

Conclusie: MediaQuery — niet alleen een bron van metrieken, maar een hulpmiddel voor het bouwen van werkelijk adaptieve interfaces. Gebruik het voor breakpoints, safe area en toegankelijkheidsoverwegingen.

Codevoorbeelden met MediaQuery

Voorbeeld 1 demonstreert het verkrijgen van de schermgrootte en het toepassen van breakpoints voor het selecteren van het aantal kolommen.

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

Bovenstaand voorbeeld toont een functie voor het selecteren van het aantal kolommen op basis van de schermbreedte. Breakpoints 600 en 900 komen overeen met algemeen aanvaarde Material Design-standaarden voor telefoons, tablets en desktop.

Voorbeeld 2 — MediaQuery met viewPadding voor correcte plaatsing van inhoud met inachtneming van systeemmarges.

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

In dit voorbeeld omhult padding de inhoud in Padding, gebruikmakend van systeemmarges. top houdt rekening met statusbalk en notch, left/right — veilige zones. bottom is niet opgenomen omdat Scaffold meestal zelf de onderste navigatie afhandelt.

Voorbeeld 3 — bepalen van oriëntatie en wijzigen van elementplaatsing.

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

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

In portrait mode zijn elementen verticaal geplaatst (Column), in landscape — horizontaal (Row). Deze aanpak biedt het beste ruimtegebruik bij draaien van het apparaat.

Conclusie: MediaQuery — het belangrijkste hulpmiddel voor het bouwen van adaptieve layouts. Houd altijd rekening met systeemmarges, breakpoints en oriëntatie bij het ontwikkelen van Flutter-interfaces.

Veelgemaakte fouten bij het werken met MediaQuery

Fout 1: MediaQuery.of(context) aanroepen buiten de context waar MediaQuery is ingesteld. Als de widget zich boven MediaQuery in de boom bevindt, leidt de aanroep tot een runtime-fout. Oplossing: roep MediaQuery.of(context) altijd aan binnen widgets die zijn omhuld door MaterialApp of CupertinoApp, waar MediaQuery als root-widget is ingesteld.

Fout 2: vergeten van safe area. Ontwikkelaars gebruiken MediaQuery.size voor plaatsing van elementen zonder rekening te houden met systeemmarges. Op apparaten met notch of gesture navigation komt inhoud onder de statusbalk terecht. Oplossing: trek MediaQuery.of(context).padding af van de positioneringscoördinaten.

Fout 3: vaste koppeling aan afmetingen. Het gebruik van MediaQuery.of(context).size.width voor het instellen van exacte elementgroottes (width: size.width * 0.3) werkt alleen op apparaten van één vormfactor. Op desktop of tablet ziet de lay-out er onnatuurlijk uit. Oplossing: gebruik breakpoints in combinatie met Expanded en Flexible voor een flexibele lay-out in plaats van vaste percentages.

Fout 4: negeren van textScaleFactor. Wanneer de gebruiker het systeemlettertype vergroot, kan de interface breken — teksten vallen buiten containergrenzen. Oplossing: controleer MediaQuery.of(context).textScaleFactor en schakel bij waarden boven 1.3 de lay-out naar een eenvoudigere versie met scrollen.

Conclusie: MediaQuery — een krachtig maar subtiel hulpmiddel. Houd rekening met systeemmarges, oriëntatie en toegankelijkheidsinstellingen zodat de interface er correct uitziet op alle apparaten.