> For the complete documentation index, see [llms.txt](https://cresshounnoukon.gitbook.io/programation-mobile-avec-flutter/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://cresshounnoukon.gitbook.io/programation-mobile-avec-flutter/interface-adaptative-responsive.md).

# 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.

```dart
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.

```dart
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.

```dart
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.