MediaQuery — qu'est-ce que c'est, principe de fonctionnement et mises en page adaptatives

Qu'est-ce que MediaQuery

MediaQuery est un widget et une classe dans Flutter qui fournit des données sur l'environnement multimédia de l'application. MediaQuery enveloppe toute l'application dans le widget racine MaterialApp ou CupertinoApp, et tout widget enfant peut accéder à ces données via MediaQuery.of(context).

Lorsque Flutter lance une application, il crée une instance de MediaQueryData contenant toutes les métriques de l'appareil actuel. Ces données sont mises à jour automatiquement lors des changements : rotation de l'appareil, redimensionnement de la fenêtre (sur le bureau), apparition du clavier ou modification des paramètres d'accessibilité du système. MediaQuery reconstruit la sous-arborescence des widgets à tout changement de données, fournissant une adaptation réactive de l'interface.

MediaQueryData inclut : size (taille de l'écran), devicePixelRatio (densité de pixels), textScaleFactor (échelle de police des paramètres système), viewInsets (zone couverte par le clavier), viewPadding (marges système), orientation (orientation) et platformBrightness (thème clair ou sombre).

En résumé : MediaQuery est la source centrale d'informations sur l'appareil dans Flutter. Accéder à MediaQuery.of(context) est la première étape pour construire toute interface adaptative.

Propriétés principales de MediaQueryData

MediaQueryData contient des dizaines de propriétés, mais les plus utilisées sont celles qui affectent la construction de la mise en page. Voyons les principales.

Size — Taille de l'écran

MediaQuery.of(context).size retourne un objet Size avec la largeur et la hauteur de l'écran en pixels indépendants de l'appareil (dip). Ces valeurs ne tiennent pas compte des marges système. Pour les calculs de mise en page adaptative, size est la métrique principale : elle détermine les points de rupture pour les mises en page mobile, tablette et bureau.

ViewPadding — Marges système

ViewPadding sont les marges que le système réserve pour la barre d'état, l'encoche (découpe de l'écran), le panneau de navigation système et l'indicateur d'accueil (sur iOS). Sans tenir compte de ces marges, le contenu peut apparaître sous les éléments système. MediaQuery.of(context).padding retourne un EdgeInsets qui doit être appliqué comme padding au conteneur racine de la page.

ViewInsets — Zone du clavier

ViewInsets est la zone de l'écran couverte par le clavier logiciel. Pour les champs de saisie, il est essentiel de surveiller viewInsets.bottom pour soulever le contenu au-dessus du clavier. Flutter gère cela automatiquement dans le scaffold, mais pour les mises en page personnalisées, vous devez utiliser MediaQuery.of(context).viewInsets directement.

Orientation — Orientation de l'appareil

Orientation — orientation portrait ou paysage. Elle est déterminée en comparant la largeur et la hauteur : si la largeur est inférieure à la hauteur — portrait, sinon — paysage. Dans le code de production, l'orientation est utilisée pour basculer entre la disposition verticale et horizontale des éléments.

En résumé : quatre propriétés clés — size, viewPadding, viewInsets et orientation — couvrent 90% des tâches de conception adaptative. Les propriétés restantes (textScaleFactor, platformBrightness, devicePixelRatio) sont utilisées pour des scénarios spécifiques.

Utilisation de MediaQuery pour les mises en page adaptatives

MediaQuery est la base du design adaptatif dans Flutter. Il permet de déterminer les points de rupture, de basculer la mise en page en fonction de la taille de l'écran et d'ajuster les marges pour différents appareils.

Scénario typique : une application mobile doit afficher une liste de produits. Sur un téléphone (largeur < 600dp) — une colonne. Sur une tablette (largeur 600–900dp) — deux colonnes. Sur un bureau (largeur > 900dp) — trois colonnes. MediaQuery.of(context).size.width permet de sélectionner dynamiquement le nombre de colonnes sans écran séparé pour chaque facteur de forme.

Deuxième scénario : prise en compte des marges de gestes système sur les appareils modernes. Sur les iPhones avec Dynamic Island ou Android avec navigation gestuelle, les marges système consomment une partie de l'écran. MediaQuery.of(context).padding retourne des valeurs correctes pour chaque type d'appareil, et Scaffold les applique automatiquement via body. Pour les widgets personnalisés, vous devez passer explicitement le padding de MediaQuery.

Troisième scénario : adaptation aux paramètres d'accessibilité du système. MediaQuery.of(context).textScaleFactor indique à quel point l'utilisateur a augmenté la taille de la police dans les paramètres. Avec textScaleFactor > 1.3, la mise en page peut se casser — les textes longs dépassent les limites des cartes. Les mises en page adaptatives doivent en tenir compte et, si nécessaire, basculer vers une mise en page plus simple.

En résumé : MediaQuery n'est pas seulement une source de métriques, mais un outil pour construire des interfaces véritablement adaptatives. Utilisez-le pour les points de rupture, la zone sécurisée et les considérations d'accessibilité.

Exemples de code avec MediaQuery

Exemple 1 montre comment obtenir la taille de l'écran et appliquer des points de rupture pour sélectionner le nombre de colonnes.

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

L'exemple ci-dessus montre une fonction pour sélectionner le nombre de colonnes en fonction de la largeur de l'écran. Les points de rupture 600 et 900 correspondent aux standards généralement acceptés de Material Design pour les téléphones, les tablettes et le bureau.

Exemple 2 — utilisation de MediaQuery avec viewPadding pour un placement correct du contenu en tenant compte des marges système.

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

Dans cet exemple, padding enveloppe le contenu dans Padding en utilisant les marges système. top tient compte de la barre d'état et de l'encoche, left/right des zones sécurisées. bottom n'est pas inclus car Scaffold gère généralement la navigation inférieure lui-même.

Exemple 3 — détermination de l'orientation et changement de disposition des éléments.

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

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

En mode portrait, les éléments sont disposés verticalement (Column) ; en mode paysage, horizontalement (Row). Cette approche permet de mieux utiliser l'espace lors de la rotation de l'appareil.

En résumé : MediaQuery est l'outil principal pour construire des mises en page adaptatives. Tenez toujours compte des marges système, des points de rupture et de l'orientation lors du développement d'interfaces Flutter.

Erreurs courantes lors de l'utilisation de MediaQuery

Erreur 1 : appeler MediaQuery.of(context) en dehors d'un contexte où MediaQuery est défini. Si un widget est au-dessus de MediaQuery dans l'arborescence, l'appel provoque une erreur d'exécution. Solution : appelez toujours MediaQuery.of(context) à l'intérieur de widgets enveloppés par MaterialApp ou CupertinoApp, où MediaQuery est défini comme widget racine.

Erreur 2 : oublier la zone sécurisée. Les développeurs utilisent MediaQuery.size pour positionner les éléments sans tenir compte des marges système. Sur les appareils avec encoche ou navigation gestuelle, le contenu se retrouve sous la barre d'état. Solution : soustrayez MediaQuery.of(context).padding des coordonnées de positionnement.

Erreur 3 : liaison rigide aux tailles. Utiliser MediaQuery.of(context).size.width pour définir des tailles exactes d'éléments (width: size.width * 0.3) fonctionne uniquement sur les appareils du même facteur de forme. Sur le bureau ou la tablette, la mise en page semble peu naturelle. Solution : utilisez des points de rupture en combinaison avec Expanded et Flexible pour une mise en page flexible, pas de pourcentages fixes.

Erreur 4 : ignorer textScaleFactor. Lorsque l'utilisateur augmente la police système, l'interface peut se casser — les textes dépassent les limites des conteneurs. Solution : vérifiez MediaQuery.of(context).textScaleFactor et, pour des valeurs supérieures à 1.3, basculez vers une mise en page plus simple avec défilement.

En résumé : MediaQuery est un outil puissant mais subtil. Tenez compte des marges système, de l'orientation et des paramètres d'accessibilité pour garantir que l'interface s'affiche correctement sur tous les appareils.