Expanded : ce que c'est et comment ça marche dans Flutter

Qu'est-ce qu'Expanded

Expanded est un widget enveloppe qui prend un enfant et le force à s'étendre pour remplir l'espace disponible dans un conteneur Flex (Row, Column, Flex). Expanded n'a pas de représentation visuelle propre — il gère uniquement les contraintes (constraints) transmises à l'élément enfant.

Au cœur d'Expanded se trouve le mécanisme Flex fourni par le framework Flutter. Lorsque Row ou Column calculent les tailles de leurs enfants, ils allouent d'abord de l'espace aux éléments non flexibles (widgets réguliers avec des tailles fixes), puis distribuent l'espace restant entre les enfants Expanded et Flexible proportionnellement à leurs facteurs flex.

Expanded utilise Flexible.fit = FlexFit.tight. Cela signifie que l'enfant d'Expanded doit occuper tout l'espace alloué, même si sa propre taille est plus petite. Contrairement à Flexible avec Fit.loose, où l'enfant peut être plus petit que la zone allouée, Expanded étend forcément le contenu.

Résumé : Expanded est l'outil principal pour créer des mises en page proportionnelles dans Flutter. Utilisez-le lorsque vous avez besoin qu'un élément remplisse garantiment toute la largeur ou hauteur disponible.

Expanded vs Flexible : différences clés

Expanded et Flexible distribuent tous deux l'espace dans les conteneurs Flex, mais se comportent fondamentalement différemment. La différence réside dans la propriété fit, qui détermine si l'enfant peut être plus petit que l'espace disponible.

Expanded a un modèle de comportement strict : son fit est égal à FlexFit.tight. Cela signifie que le widget enfant reçoit des contraintes égales à l'espace disponible — ni plus, ni moins. Si l'enfant est plus petit, il s'étire. S'il est plus grand, il rétrécit. Flexible utilise FlexFit.loose, permettant à l'élément enfant d'avoir n'importe quelle taille dans l'espace alloué.

En pratique : si une Row contient deux Expanded avec flex=1, chacun occupera exactement la moitié de la largeur. Si vous les remplacez par Flexible avec fit.loose, chaque enfant peut être plus petit que la moitié si sa propre taille est plus petite — l'espace restant reste vide.

Résumé : utilisez Expanded pour les mises en page proportionnelles strictes, Flexible lorsque l'enfant peut être plus petit que l'espace disponible. Si vous n'êtes pas sûr — commencez par Expanded, il offre un comportement plus prévisible.

Facteur flex : comment l'espace est distribué

Facteur flex (paramètre flex) est une valeur numérique qui détermine la portion d'espace disponible qu'un Expanded recevra. Par défaut flex=1, ce qui signifie une distribution égale entre tous les enfants Expanded.

L'algorithme de distribution fonctionne en trois étapes. Premièrement : Flutter calcule la taille intrinsèque de tous les enfants non flexibles. Deuxièmement : l'espace restant est divisé par la somme de tous les facteurs flex. Troisièmement : chaque Expanded reçoit une part égale à son facteur flex multiplié par la taille d'une unité flex.

Par exemple, une Row de 300px de large contient deux Expanded : le premier avec flex=2, le second avec flex=1. L'espace libre (300px moins les enfants non flexibles) est divisé en 3 parties. Le premier reçoit 2/3, le second reçoit 1/3. S'il n'y a pas d'enfants non flexibles, le premier reçoit 200px, le second reçoit 100px.

Le facteur flex peut être n'importe quel nombre entier positif. La valeur 0 est un cas spécial : Expanded avec flex=0 se comporte comme un widget non flexible régulier, occupant l'espace minimal selon la taille de l'enfant. Ce comportement équivaut à l'absence d'Expanded.

Résumé : le facteur flex est la clé pour construire des mises en page flexibles. Utilisez les proportions 1:1 pour des colonnes égales, 2:1 pour des panneaux avec zone principale et latérale, 3:1 pour des interfaces avec navigation étroite.

Exemples de code avec Expanded

Exemple 1 démontre l'utilisation de base d'Expanded dans Row pour créer trois colonnes égales.

Row(
  children: [
    Expanded(
      child: Container(
        color: Colors.red,
      ),
    ),
    Expanded(
      child: Container(
        color: Colors.green,
      ),
    ),
    Expanded(
      child: Container(
        color: Colors.blue,
      ),
    ),
  ],
)

Dans cet exemple, trois Expanded avec flex=1 (par défaut) divisent la largeur de Row également. Les conteneurs s'étendent à la hauteur totale définie par Row et occupent des parts égales. Cette approche est pratique pour créer des mises en page basées sur des colonnes avec distribution proportionnelle.

Exemple 2 montre l'utilisation de différents facteurs flex pour créer une mise en page avec barre latérale et contenu principal.

Row(
  children: [
    Expanded(
      flex: 1,
      child: Container(
        color: Colors.grey.200,
        child: const Center(
          child: Text('Barre latérale'),
        ),
      ),
    ),
    Expanded(
      flex: 3,
      child: Container(
        color: Colors.white,
        child: const Center(
          child: Text('Zone de contenu'),
        ),
      ),
    ),
  ],
)

Le deuxième exemple crée une mise en page typique avec une barre latérale (25%) et une zone de contenu principal (75%). flex=1 et flex=3 donnent un rapport 1:3. Lorsque la largeur de l'écran change, les proportions sont préservées automatiquement — c'est la base des interfaces adaptatives.

Résumé : Expanded avec différents facteurs flex est un outil standard pour construire des mises en page adaptatives. La combinaison d'Expanded dans Column permet de créer des agencements proportionnels à la fois horizontaux et verticaux.

Erreurs courantes lors de l'utilisation d'Expanded

Erreur 1 : utiliser Expanded en dehors de Row, Column ou Flex. Si vous placez Expanded directement dans Stack, ListView ou un autre conteneur non Flex, Flutter lance une LayoutException avec le message « Expanded widgets must be placed inside Flex widgets ». Solution : vérifiez le widget parent — seulement Row, Column ou Flex.

Erreur 2 : placer Expanded à l'intérieur de ListView sans spécifier shrinkWrap. ListView a par défaut une hauteur infinie dans la direction de défilement, et Expanded ne peut pas calculer sa part. Solution : utilisez shrinkWrap: true ou enveloppez le ListView dans un SizedBox avec une hauteur fixe.

Erreur 3 : plusieurs Expanded avec un flex total dépassant l'espace disponible. Si une Row avec une largeur limitée contient Expanded ainsi que des widgets avec une grande taille intrinsèque, un débordement peut se produire. Solution : vérifiez les tailles minimales des enfants non flexibles et utilisez FittedBox ou Flex fit si nécessaire.

Erreur 4 : Expanded imbriqués dans Column à l'intérieur de Row. Si un Expanded à l'intérieur d'une Column contient un autre Expanded à l'intérieur d'une Row, un conflit de contraintes peut survenir. Solution : limitez la profondeur d'imbrication ou utilisez ConstrainedBox pour définir explicitement les dimensions aux niveaux intermédiaires.

Résumé : Expanded nécessite le contexte parent correct. Vérifiez toujours qu'Expanded est placé directement dans Row, Column ou Flex, et évitez l'imbrication sans dimensions explicites.