Row

Le widget Row est utilisé pour aligner ses enfants de manière horizontale, les uns à côté des autres. Voici un exemple d'utilisation du widget Row :

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: <Widget>[
    Text('Élément 1'),
    Text('Élément 2'),
    Text('Élément 3'),
  ],
)

Vous pouvez également personnaliser l'espacement entre les enfants en utilisant la propriété mainAxisAlignment pour ajuster l'espacement horizontal et la propriété crossAxisAlignment pour ajuster l'espacement vertical.

  • mainAxisAlignment : Cette propriĂ©tĂ© dĂ©finit comment les enfants sont alignĂ©s horizontalement dans la ligne. Les valeurs possibles sont :

    • MainAxisAlignment.start : Les enfants sont alignĂ©s Ă  gauche de la ligne.

    • MainAxisAlignment.end : Les enfants sont alignĂ©s Ă  droite de la ligne.

    • MainAxisAlignment.center : Les enfants sont centrĂ©s horizontalement dans la ligne.

    • MainAxisAlignment.spaceBetween : Les enfants sont rĂ©partis de manière Ă©gale dans la ligne, avec un espace Ă©gal entre chaque enfant mais pas avant le premier ou après le dernier enfant.

    • MainAxisAlignment.spaceAround : Les enfants sont rĂ©partis de manière Ă©gale dans la ligne, avec un espace Ă©gal autour de chaque enfant.

    • MainAxisAlignment.spaceEvenly : Les enfants sont rĂ©partis de manière Ă©gale dans la ligne, avec un espace Ă©gal entre chaque enfant, y compris avant le premier et après le dernier enfant.

  • crossAxisAlignment : Cette propriĂ©tĂ© dĂ©finit comment les enfants sont alignĂ©s verticalement dans la ligne. Les valeurs possibles sont :

    • CrossAxisAlignment.start : Les enfants sont alignĂ©s en haut de la ligne.

    • CrossAxisAlignment.end : Les enfants sont alignĂ©s en bas de la ligne.

    • CrossAxisAlignment.center : Les enfants sont centrĂ©s verticalement dans la ligne.

    • CrossAxisAlignment.stretch : Les enfants sont Ă©tirĂ©s pour remplir l'espace vertical disponible.

    • CrossAxisAlignment.baseline : Les enfants sont alignĂ©s en fonction de leur ligne de base commune. Cette option est utile lorsque vous avez des enfants avec du texte et que vous voulez les aligner par leur ligne de base.

  • mainAxisSize : Cette propriĂ©tĂ© dĂ©finit la taille principale de la ligne en fonction de la taille de ses enfants ou de l'espace disponible. Les valeurs possibles sont MainAxisSize.max (la ligne occupe toute la largeur disponible) et MainAxisSize.min (la ligne est aussi petite que possible pour contenir ses enfants).

Last updated