Créer un design responsive avec MediaQuery
Créer un design responsive avec MediaQuery dans Flutter
-
Objectif
- Être capable d’utiliser la fonction
MediaQuery.of(context)dans Flutter. -
Présentation
- Une application responsive est une application écrite de manière à s’adapter à la taille d’écran disponible de l’appareil sur lequel elle est affichée. Ceci est souvent réalisé par l’application qui restitue l’interface utilisateur si l’utilisateur redimensionne l’écran ou si l’orientation de l’appareil est modifiée.
- Au cours du processus de développement d’une application pour les téléphones et les tablettes, il est de pratique courante d’avoir différentes dispositions d’interface utilisateur pour différentes tailles d’écran pour une meilleure expérience utilisateur.
- L’aspect clé pour rendre l’interface utilisateur réactive est d’obtenir les résolutions de l’appareil que l’application exécute, par programmation. Pour cela, nous pouvons utiliser la classe
MediaQuery. -
MediaQuery - Comme son nom l’indique, le widget
MediaQuerycontient des informations sur un média. Vous l’avez bien deviné, ici média signifie fenêtre, avec sa taille ou son orientation . - La classe
MediaQuerysera utile lorsqu’elle est utilisée avec le contexte de l’application en cours d’exécution. - Vous pouvez utiliser pour récupérer la taille (largeur/hauteur) et l’orientation (portrait/paysage) de l’écran.
- Grâce à
MediaQuery, vous pouvez obtenir des informations sur la taille de l’appareil sur lequel vous vous trouvez, ainsi que sur les préférences de l’utilisateur, et créer votre mise en page en conséquence. MediaQueryfournit une vue de niveau supérieur de la taille de l’écran de votre application et peut fournir des informations plus détaillées sur les préférences de mise en page de l’utilisateur.- l existe deux modes principaux dans Flutter. Ils sont en mode portrait et en mode paysage. Du coup, quand on change de mode, le look change aussi.
MediaQueryfournit une vue de niveau supérieur de la taille de l’écran de l’application actuelle et peut également fournir des informations plus détaillées sur l’appareil et ses préférences de mise en page.- Le widget
MediaQueryest le premier endroit où vous devriez regarder si vous essayez d’obtenir des informations spécifiques sur l’appareil physique sur lequel votre application s’exécute, ou si vous souhaitez manipuler l’appareil. Vous pouvez l’utiliser pour : - Demandez si le téléphone est actuellement en orientation portrait ou paysage.
- Désactivez les animations et inversez les couleurs pour des raisons d’accessibilité.
- Demandez au téléphone si l’utilisateur voit son facteur de taille de texte augmenté.
- Définissez le rembourrage pour l’ensemble de votre application.
-
Exemple:
- L’utilisation de
mediaQuery.ofentraîne automatiquement la reconstruction des widgets en fonction de la taille actuelle des appareils et des préférences de mise en page à chaque fois qu’ils changent.
final Orientation orientation = MediaQuery.of(context).orientation;
final Size size = MediaQuery.of(context).size;
Code
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Home(title: 'Flutter Demo Home Page'),
debugShowCheckedModeBanner: false, //supprimer la bannière de debug
);
}
}
class Home extends StatelessWidget {
var size, height, width;
Home({Key? key, required String title}) : super(key: key);
@override
Widget build(BuildContext context) {// obtenir la taille de la fenêtre
size = MediaQuery.of(context).size;
height = size.height;
width = size.width;
return Scaffold(
appBar: AppBar(
title: const Text("Tutoriel MediaQuery"),
backgroundColor: Colors.blueGrey,
),
body: Container(
color: Colors.cyan,
height: height / 2, //La moitié de la taille de la hauteur
width: width / 2, //La moitié de la taille de la largeur
),
);
}
}
Résultat
