Flutter · Chapitre 04 — Widgets de layout

1 Notion

Row & Column

Row aligne ses enfants horizontalement, Column verticalement. Tous deux prennent une liste children.

Column(children: [
  Text('Ladignac-le-Long'),
  Row(children: [ Icon(Icons.local_gas_station), Text('4200 L') ]),
])

2 Notion

L'alignement

mainAxisAlignment (axe principal) et crossAxisAlignment (axe transverse) règlent la répartition. Pour une Column, l'axe principal est vertical.

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [ Text('Volume'), Text('4200 L') ],
)

3 Notion

Espace flexible : Expanded

Expanded fait qu'un enfant occupe l'espace restant ; utile pour une jauge ou pour pousser un élément à droite.

Row(children: [
  Expanded(child: LinearProgressIndicator(value: 0.6)),
  Text(' 60%'),
])

4 Notion

Superposer : Stack

Stack empile les widgets les uns sur les autres (comme des calques) ; Positioned place précisément un enfant. Idéal pour un badge sur une image.

5 Notion

Marges & espacements

Padding (marge intérieure), SizedBox (espace fixe entre deux widgets), EdgeInsets pour définir les valeurs.

SizedBox(height: 12)   // un espace vertical de 12 px

🛢️ Sur le projet Fioul Groupé

Construis la carte d'une campagne : la zone en titre, une Row volume/prix avec spaceBetween, et une jauge de progression avec Expanded. C'est la brique de l'écran liste (chapitre 7).

À retenir

Row/Column + children ; alignements main/cross.
Expanded pour l'espace flexible ; Stack pour superposer.
Padding, SizedBox, EdgeInsets pour l'espacement.