Quelle est l'équivalent de wrap_content et match_parent dans flutter ?

Le framework Flutter permet de créer une interface d'une application mobile avec des widgets. C'est l'arborescence et l'agencement entre les widgets qui constituent l'application. Lorsque vous développez une application native sur Android, les widgets que vous écrivez ont deux comportements possibles dans leurs tailles par rapport aux enfants : soit le parent prend la taille de celle de ses enfants réunis, soit l'enfant prend la taille maximum possible dans son parent. Avec Flutter, on peut imiter les deux comportements.

Lorsque vous faites un développement avec les langages natifs des applications Android, ces deux comportements correspondent à deux propriétés : "wrap_content" pour le premier et "match_parent" pour le second. Avec le framework, par défaut tous les widgets sont configurés pour se comporter de manière similaire à la propriété "wrap_content".

//Comportement par défaut : le parent va prendre la taille des enfants réunis
Container(
  children: [widgetEnfant])

Pour changer ce comportement, vous pouvez le faire sur les deux axes possibles, la largeur et la hauteur. Pour que le widget enfant prenne toute la taille possible, il suffit de modifier sa largeur et sa hauteur. Si vous utilisez la valeur "double.infinity", qui correspond à l'infini dans le langage Dart, alors le widget enfant prendra tout l'espace, comme avec la propriété "match_parent".

Container(
  height: double.infinity,
  width: double.infinity,
  child: widgetEnfant)

Pour ne faire cette occupation d'espace que sur un seul axe, il faut utiliser un type de container différent. Pour que ce soit toute la largeur qui soit occupée, on utilise une ligne (Row), tandis que l'on utilise une colonne (Column) pour que ce soit la hauteur. Il faudra dans le container utiliser la propriété "mainAxisSize" avec la valeur "MainAxisSize.max" pour que l'axe soit entièrement occupé par le widget enfant.

//L'enfant prend toute la largeur
Row(
  mainAxisSize: MainAxisSize.max,
  children: [widgetEnfant],
);

//L'enfant prend toute la hauteur
Column(
  mainAxisSize: MainAxisSize.max,
  children: [widgetEnfant],
);
Autour du même sujet

Android