Flutter : comment dimensionner un element / widget en fonction de la taille de l'écran (largeur et hauteur) ?
Le framework Flutter a été conçu par Google dans le but, à terme, de pouvoir prendre en charge le maximum de plateformes. Cela induit donc que de nombreux périphériques pourront exécuter une même application. On pourra le faire à partir de l'écran de son smartphone jusqu’à celui de son ordinateur. Cela implique pour un développeur de devoir gérer toutes ces tailles d'écran. Le framework fournit des classes et widgets s'adaptant en pourcentage à la taille de l'écran.
La classe "MediaQuery" est utile dans vos développements si vous avez besoin de vous adapter à la taille de l'écran. Comme son nom l'indique, elle regroupe différentes informations sur le périphérique qui exécute l'application. La propriété "of(context).size" correspond à la taille de l'écran. La largeur peut être récupérée avec l'attribut "width", et la hauteur avec l'attribut "height".
var largeurEcran = MediaQuery.of(context).size.width; var hauteurEcran = MediaQuery.of(context).size.height;
Il existe également des widgets qui utilisent des pourcentages pour modifier leur taille. C'est notamment le cas du widget "FractionallySizedBox". Il utilise les propriétés "widthFactor" et "heightFactor", qui acceptent un nombre à virgule compris entre 0 et 1 représentant un pourcentage de la largeur et la hauteur disponibles.
Widget monWidget() {
return FractionallySizedBox(
widthFactor: 0.5,
heightFactor: 0.5,
child: Container(
color: Colors.blue,
),
);
}
Le widget de type "Expanded" a comme comportement par défaut de prendre tout l'espace disponible dans son container. Il prendra par exemple toute la largeur s'il est dans une ligne, et toute la hauteur s'il est dans une colonne. Il existe une propriété "flex" qui permet de définir un pourcentage. Ce nombre doit être compris entre 0 et 10. Par exemple, si la valeur de la propriété "flex" est définie à 5, alors le widget prendra 50 % de la taille.
//Widget avec une colonne moitié rouge, moitié blanche
Widget monWidget() {
return Column(
children: [
Expanded(
flex: 5,
child: Container(
color: Colors.red,
),
),
Expanded(
flex: 5,
child: Container(
color: Colors.white,
),
),
],
);
}