Chapitre 46 — Les layouts : Row, Column, Stack et les contraintes

Niveau : débutant / intermédiaire Durée estimée : 10 h Pré-requis : chapitre 45 — StatelessWidget et StatefulWidget Ce que vous saurez faire à la fin : placer n'importe quel widget exactement où vous le voulez à l'écran, comprendre et corriger les erreurs de mise en page de Flutter, et reproduire une maquette complète sans tâtonner.

46.0 — Objectifs du chapitre

À la fin de ce chapitre, vous serez capable de :

• énoncer la règle de mise en page de Flutter en une phrase ;
• expliquer ce qu'est une contrainte et pourquoi elle descend dans l'arbre ;
• utiliser Container en connaissant ses pièges ;
• écrire un EdgeInsets sous ses quatre formes ;
• décorer une boîte avec BoxDecoration : couleur, bordure, coins arrondis, ombre ;
• choisir entre Padding, SizedBox, Center et Align ;
• empiler des widgets verticalement avec Column ;
• aligner des widgets horizontalement avec Row ;
• distinguer axe principal et axe transversal ;
• utiliser les six valeurs de MainAxisAlignment ;
• utiliser les valeurs de CrossAxisAlignment ;
• régler mainAxisSize et savoir pourquoi ;
• lire une erreur RenderFlex overflowed et la corriger en trois façons différentes ;
• répartir l'espace avec Expanded, Flexible et Spacer ;
• expliquer la différence exacte entre Expanded et Flexible ;
• passer à la ligne automatiquement avec Wrap ;
• superposer des widgets avec Stack et les placer avec Positioned ;
• garder plusieurs pages en mémoire avec IndexedStack ;
• imposer un rapport largeur/hauteur avec AspectRatio ;
• dimensionner en pourcentage avec FractionallySizedBox ;
• forcer des contraintes avec ConstrainedBox et BoxConstraints ;
• comprendre le coût de IntrinsicHeight ;
• rendre une page défilante avec SingleChildScrollView ;
• éviter l'encoche et la barre système avec SafeArea ;
• déboguer visuellement une mise en page ;
• reconstruire une maquette de haut en bas avec une méthode reproductible.