Interface adaptative : Responsive

L'adaptabilité de l'interface utilisateur est essentielle pour garantir une expérience utilisateur optimale sur une grande variété d'appareils et de tailles d'écran. Dans Flutter, vous pouvez créer des interfaces utilisateur réactives qui s'ajustent dynamiquement en fonction de la taille de l'écran et d'autres facteurs. Voici comment :

Media Query

Flutter fournit la classe MediaQuery, qui vous permet d'interroger les propriétés de l'appareil, telles que la taille de l'écran, l'orientation et la densité de pixels. Vous pouvez utiliser MediaQuery pour rendre votre interface utilisateur réactive en fonction de ces propriétés.

Widget build(BuildContext context) {
  final Size screenSize = MediaQuery.of(context).size;
  final double screenWidth = screenSize.width;
  final double screenHeight = screenSize.height;

  // Utiliser la taille de l'écran pour rendre l'interface utilisateur réactive
  return Container(
    width: screenWidth * 0.8, // Utiliser 80% de la largeur de l'écran
    height: screenHeight * 0.6, // Utiliser 60% de la hauteur de l'écran
    child: // Votre contenu ici
  );
}

LayoutBuilder

La classe LayoutBuilder vous permet de créer des interfaces utilisateur réactives en fonction des contraintes de mise en page actuelles. Vous pouvez utiliser LayoutBuilder pour ajuster dynamiquement la mise en page en fonction de la taille de l'écran.

Widget build(BuildContext context) {
  return LayoutBuilder(
    builder: (BuildContext context, BoxConstraints constraints) {
      final double maxWidth = constraints.maxWidth;
      final double maxHeight = constraints.maxHeight;

      // Utiliser les contraintes de mise en page pour rendre l'interface utilisateur réactive
      return Container(
        width: maxWidth * 0.8, // Utiliser 80% de la largeur disponible
        height: maxHeight * 0.6, // Utiliser 60% de la hauteur disponible
        child: // Votre contenu ici
      );
    },
  );
}

MediaQuery.of(context).orientation

Vous pouvez également utiliser la propriété orientation de MediaQuery pour adapter l'interface utilisateur en fonction de l'orientation de l'appareil.

final Orientation orientation = MediaQuery.of(context).orientation;
if (orientation == Orientation.portrait) {
  // Afficher une mise en page adaptée à la vue portrait
} else {
  // Afficher une mise en page adaptée à la vue paysage
}

En utilisant ces techniques, vous pouvez créer des interfaces utilisateur réactives qui s'adaptent dynamiquement à différentes tailles d'écran et orientations, offrant ainsi une expérience utilisateur cohérente sur tous les appareils.