MediaQuery — vad är det, funktionsprincip och adaptiva layouter

Vad är MediaQuery

MediaQuery — är en widget och klass i Flutter som tillhandahåller data om applikationens mediamiljö. MediaQuery omsluter hela applikationen i rotwidgeten MaterialApp eller CupertinoApp, och vilken underordnad widget som helst kan komma åt dessa data via MediaQuery.of(context).

När Flutter startar applikationen skapar den en MediaQueryData-instans som innehåller alla mätvärden för den aktuella enheten. Dessa data uppdateras automatiskt vid förändringar: rotation av enheten, ändring av fönsterstorlek (på skrivbordet), tangentbordets uppdykande eller ändring av systemets tillgänglighetsinställningar. MediaQuery bygger om widgetens subträd vid varje dataändring, vilket säkerställer reaktiv anpassning av gränssnittet.

MediaQueryData omfattar: size (skärmstorlek), devicePixelRatio (pixeldensitet), textScaleFactor (teckenstorleksskala från systeminställningar), viewInsets (område täckt av tangentbord), viewPadding (systemmarginaler), orientation (orientering) och platformBrightness (ljus eller mörk tema).

Slutsats: MediaQuery — central källa för enhetsinformation i Flutter. Åtkomst till MediaQuery.of(context) är det första steget i att bygga vilket adaptivt gränssnitt som helst.

Huvudegenskaper för MediaQueryData

MediaQueryData innehåller dussintals egenskaper, men de mest använda är de som påverkar layoutbyggandet. Låt oss titta på de viktigaste.

Size — skärmstorlek

MediaQuery.of(context).size returnerar ett Size-objekt med skärmens bredd och höjd i logiska pixlar (device-independent pixels, dip). Dessa värden tar inte hänsyn till systemmarginaler. För beräkningar av adaptiva layouter är size det primära mätvärdet: baserat på det bestäms brytpunkter för mobil, tablett och skrivbordslayout.

ViewPadding — systemmarginaler

ViewPadding — marginaler som systemet reserverar för statusfältet, notch (urtag i skärmen), systemnavigeringspanel och hemindikator (på iOS). Utan hänsyn till dessa marginaler kan innehåll hamna under systemelement. MediaQuery.of(context).padding returnerar EdgeInsets som måste tillämpas som padding på sidans rotbehållare.

ViewInsets — tangentbordsområde

ViewInsets — skärmområdet som täcks av mjukvarutangentbordet. För inmatningsfält är det kritiskt att övervaka viewInsets.bottom för att lyfta innehåll ovanför tangentbordet. Flutter hanterar detta automatiskt i scaffold, men för anpassade layouter måste MediaQuery.of(context).viewInsets användas direkt.

Orientation — enhetsorientering

Orientation — vertikal (portrait) eller horisontell (landscape) orientering. Bestäms genom att jämföra bredd och höjd: om bredden är mindre än höjden — portrait, annars — landscape. I produktionskod används orientering för att växla mellan vertikal och horisontell placering av element.

Slutsats: fyra viktiga egenskaper — size, viewPadding, viewInsets och orientation — täcker 90% av adaptiva designuppgifter. Övriga egenskaper (textScaleFactor, platformBrightness, devicePixelRatio) används för specifika scenarier.

Använda MediaQuery för adaptiva layouter

MediaQuery — grunden för adaptiv design i Flutter. Genom det bestäms brytpunkter, layout växlar beroende på skärmstorlek och marginaler justeras för olika enheter.

Typiskt scenario: mobilapplikation ska visa en produktlista. På telefon (bredd < 600dp) — en kolumn. På surfplatta (bredd 600–900dp) — två kolumner. På skrivbord (bredd > 900dp) — tre kolumner. MediaQuery.of(context).size.width möjliggör dynamiskt val av antal kolumner utan separat skärm för varje formfaktor.

Andra scenariot: hänsyn till systemets gesture-insatser på moderna enheter. På iPhone med Dynamic Island eller Android med gesture navigation tar systemmarginaler upp en del av skärmen. MediaQuery.of(context).padding returnerar korrekta värden för varje enhetstyp och Scaffold tillämpar dem automatiskt via body. För anpassade widgets måste padding uttryckligen skickas från MediaQuery.

Tredje scenariot: anpassning till systemets tillgänglighetsinställningar. MediaQuery.of(context).textScaleFactor visar hur mycket användaren har förstorat teckensnittet i inställningarna. Vid textScaleFactor > 1.3 kan layouten gå sönder — långa texter hamnar utanför kortens gränser. Adaptiva layouter bör ta hänsyn till detta och vid behov växla till en enklare layout.

Slutsats: MediaQuery — inte bara en källa till mätvärden, utan ett verktyg för att bygga verkligt adaptiva gränssnitt. Använd det för brytpunkter, safe area och hänsyn till tillgänglighet.

Kodexempel med MediaQuery

Exempel 1 visar hämtning av skärmstorlek och tillämpning av brytpunkter för att välja antal kolumner.

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

Exemplet ovan visar en funktion för att välja antal kolumner baserat på skärmbredd. Brytpunkterna 600 och 900 motsvarar allmänt accepterade Material Design-standarder för telefoner, surfplattor och skrivbord.

Exempel 2 — användning av MediaQuery med viewPadding för korrekt placering av innehåll med hänsyn till systemmarginaler.

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

I detta exempel omsluter padding innehållet i Padding med hjälp av systemmarginaler. top tar hänsyn till statusfält och notch, left/right — säkra zoner. bottom ingår inte eftersom Scaffold vanligtvis hanterar nedre navigering själv.

Exempel 3 — bestämning av orientering och ändring av elementplacering.

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

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

I portrait-läge är element placerade vertikalt (Column), i landscape — horisontellt (Row). Detta tillvägagångssätt ger bästa utrymmesanvändning vid rotation av enheten.

Slutsats: MediaQuery — det viktigaste verktyget för att bygga adaptiva layouter. Ta alltid hänsyn till systemmarginaler, brytpunkter och orientering vid utveckling av Flutter-gränssnitt.

Vanliga misstag vid arbete med MediaQuery

Misstag 1: anropa MediaQuery.of(context) utanför kontexten där MediaQuery är inställt. Om widgeten befinner sig ovanför MediaQuery i trädet leder anropet till ett runtime-fel. Lösning: anropa alltid MediaQuery.of(context) inuti widgets som är omslutna av MaterialApp eller CupertinoApp, där MediaQuery är inställt som rotwidget.

Misstag 2: glömma safe area. Utvecklare använder MediaQuery.size för att placera element utan hänsyn till systemmarginaler. På enheter med notch eller gesture navigation hamnar innehåll under statusfältet. Lösning: subtrahera MediaQuery.of(context).padding från positioneringskoordinaterna.

Misstag 3: hård koppling till storlekar. Att använda MediaQuery.of(context).size.width för att ställa in exakta elementstorlekar (width: size.width * 0.3) fungerar bara på enheter med en formfaktor. På skrivbord eller surfplatta ser layouten onaturlig ut. Lösning: använd brytpunkter i kombination med Expanded och Flexible för flexibel layout, inte hårda procentsatser.

Misstag 4: ignorera textScaleFactor. När användaren förstorar systemteckensnittet kan gränssnittet gå sönder — texter hamnar utanför behållargränser. Lösning: kontrollera MediaQuery.of(context).textScaleFactor och vid värden över 1.3 växla layouten till en enklare version med rullning.

Slutsats: MediaQuery — kraftfullt men känsligt verktyg. Ta hänsyn till systemmarginaler, orientering och tillgänglighetsinställningar så att gränssnittet ser korrekt ut på alla enheter.