Flexible : ce que c'est, principe de fonctionnement et configuration dans le développement mobile

Qu'est-ce que Flexible

Flexible est un widget wrapper qui fournit un espace flexible à un élément enfant dans un conteneur Flex. Flexible, comme Expanded, participe à la répartition de l'espace libre, mais avec une différence clé : l'enfant de Flexible peut occuper moins d'espace que celui alloué si sa propre taille est inférieure à l'espace disponible.

Flexible utilise l'algorithme Flex de Flutter pour calculer l'espace disponible. D'abord, le framework interroge tous les enfants non flexibles (widgets sans Flexible/Expanded) et calcule leur taille intrinsèque. L'espace restant est divisé entre les enfants flexibles proportionnellement à leurs facteurs flex. Après l'allocation d'espace, Flexible vérifie le fit — s'il est loose, l'enfant reçoit une contrainte de « pas plus grand que l'alloué », lui permettant de rester petit.

Une caractéristique de Flexible : si le widget enfant a ses propres tailles minimales (par exemple, Text avec une chaîne longue), Flexible alloue l'espace demandé sans étirement forcé. Cela rend Flexible indispensable pour les éléments dont la taille doit être déterminée par le contenu plutôt que par le conteneur.

En résumé : utilisez Flexible lorsque vous devez réserver de l'espace pour un élément sans le forcer à s'étirer. Cela préserve les tailles naturelles du contenu tout en maintenant une répartition flexible de la mise en page.

FlexFit.tight vs FlexFit.loose

FlexFit est une énumération de deux valeurs : tight et loose. Le choix du fit détermine si le widget enfant sera forcé de s'étirer à la taille de l'espace alloué.

FlexFit.tight : l'élément enfant reçoit des tight constraints — les tailles minimale et maximale sont égales à l'espace alloué. L'enfant doit occuper exactement l'espace que l'algorithme Flex a alloué. Si l'enfant est plus petit — il s'étire. S'il est plus grand — il se rétrécit. Le comportement est identique à Expanded.

FlexFit.loose : l'élément enfant reçoit des loose constraints — la taille minimale est 0, la maximale est égale à l'espace alloué. L'enfant peut avoir n'importe quelle taille de 0 au maximum. Si l'enfant est petit (par exemple, Text avec une chaîne courte), il occupe sa largeur naturelle et l'espace restant reste vide.

En résumé : FlexFit.loose est le choix pour les blocs de texte et les éléments à taille naturelle. FlexFit.tight est pour les mises en page en colonnes strictes où tous les éléments doivent avoir la même largeur ou hauteur.

Quand utiliser Flexible au lieu de Expanded

Flexible et Expanded se ressemblent mais résolvent des tâches différentes. Expanded étire toujours l'enfant pour remplir tout l'espace disponible. Flexible peut laisser de l'espace vide autour de l'enfant si la taille du contenu est inférieure à la part allouée.

Scénario pour Flexible : dans une Row, il y a deux boutons. Le premier — « Acheter » (texte court), le second — « Ajouter au panier » (texte long). Avec Expanded, les deux boutons s'étirent à la même largeur et le texte court aura un padding énorme. Avec Flexible, chaque bouton prend la largeur de son texte et l'espace libre reste entre eux ou sur les bords.

Scénario pour Expanded : dans une Column, il y a trois cartes qui doivent occuper la même hauteur indépendamment du contenu. Expanded divise uniformément la hauteur disponible et chaque carte s'étire à la même taille. Flexible avec loose ne fonctionnerait pas ici — une petite carte resterait petite, brisant la conception uniforme.

En résumé : choisissez Flexible lorsque le contenu détermine la taille de l'élément et que l'espace vide autour est acceptable. Choisissez Expanded lorsque tous les éléments doivent avoir la même taille indépendamment du contenu.

Exemples de code avec Flexible

Exemple 1 montre l'utilisation de base de Flexible avec FlexFit.loose dans une Row.

Row(
  children: [
    Flexible(
      fit: FlexFit.loose,
      child: Container(
        color: Colors.amber,
        child: const Text('court'),
      ),
    ),
    Flexible(
      fit: FlexFit.loose,
      child: Container(
        color: Colors.cyan,
        child: const Text('texte long pour démo'),
      ),
    ),
  ],
)

Dans l'exemple, les deux Flexible utilisent loose fit. Le premier conteneur avec du texte court occupe sa largeur naturelle. Le second avec du texte long — la sienne. Row alloue à chacun la moitié de la largeur disponible, mais loose fit permet aux conteneurs d'être plus petits et l'espace libre reste vide entre eux.

Exemple 2 — comparaison de Flexible avec Tight et Loose fit dans une Column.

Column(
  children: [
    Flexible(
      fit: FlexFit.tight,
      child: const Card(
        child: ListTile(
          title: Text('Tight — hauteur totale étirée'),
        ),
      ),
    ),
    const SizedBox(
      height: 8,
    ),
    Flexible(
      fit: FlexFit.loose,
      child: const Card(
        child: ListTile(
          title: Text('Loose — hauteur naturelle'),
        ),
      ),
    ),
  ],
)

Dans la Column, le premier Flexible (tight) étire la Card à la moitié de la hauteur disponible. Le deuxième Flexible (loose) — la Card prend la hauteur selon son contenu et l'espace restant reste vide. Visuellement, on peut voir comment tight remplit de force la zone, tandis que loose préserve une taille compacte.

En résumé : dans le code de production, Flexible avec loose est utilisé pour les champs de formulaire, les boutons et les blocs de texte. Flexible avec tight est équivalent à Expanded et est utilisé pour une répartition uniforme.

Erreurs courantes lors de l'utilisation de Flexible

Erreur 1 : utiliser Flexible en dehors d'un conteneur Flex. Comme Expanded, Flexible lance une LayoutException s'il n'est pas placé dans Row, Column ou Flex. Solution : vérifiez toujours la chaîne de widgets parents.

Erreur 2 : confondre Flexible et Expanded. Les développeurs utilisent souvent Expanded quand Flexible avec loose fit est nécessaire, et vice versa. Résultat : Expanded étire un élément avec du texte court, créant de grandes marges vides. Solution : si la taille de l'élément peut être plus petite que l'alloué — utilisez Flexible(fit: FlexFit.loose).

Erreur 3 : facteur flex nul. Flexible avec flex=0 se comporte comme un widget non flexible, ce qui peut être contre-intuitif. Le développeur s'attend à un comportement flexible, mais l'élément occupe la taille minimale. Solution : flex doit être ≥1 pour une répartition active de l'espace.

Erreur 4 : Flexible dans une ScrollView sans contrainte de taille. Si Flexible est dans une Column à l'intérieur de SingleChildScrollView, le conteneur de défilement fournit un espace infini et la répartition flex ne fonctionne pas. Solution : contraignez la taille du conteneur de défilement avec SizedBox ou ConstrainedBox.

En résumé : Flexible nécessite la même attention au contexte parent que Expanded. La seule différence est le fit — choisissez-le délibérément en fonction de la tâche.