1. La structure fondamentale d’un écran mobile : Scaffold

Le widget Scaffold implémente la structure visuelle de base recommandée par les guides Material Design. Il fournit les emplacements d’accueil standards d’une application mobile moderne : appBar, body, floatingActionButton, drawer (menu coulissant) et bottomNavigationBar :

@override
Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title: const Text('ecole-informatique.ch'),
            backgroundColor: Colors.indigo,
            foregroundColor: Colors.white,
        ),
        body: SafeArea(
            child: Padding(
                padding: const EdgeInsets.symmetric(horizontal: 16.0),
                child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: const [
                        Text('Bienvenue à Genève et Lausanne'),
                        // Autres composants enfants...
                    ],
                ),
            ),
        ),
    );
}

2. Alignement linéaire avec Column et Row

Les widgets Column (alignement vertical) et Row (alignement horizontal) agencent leurs enfants le long de leur axe principal (mainAxisAlignment) et transversal (crossAxisAlignment). Pour répartir dynamiquement l’espace résiduel, on utilise le widget flexible Expanded.

3. Défilement performant avec ListView.builder

Lorsque le contenu dépasse la hauteur physique de l’écran, un Column classique provoque un débordement d’affichage (bandes hachurées jaunes et noires d’overflow). Pour afficher des listes longues ou dynamiques, ListView.builder() recycle virtuellement les cellules visibles à l’écran, réduisant l’empreinte mémoire au strict minimum.

Synthèse pédagogique : Encapsulez systématiquement le corps de vos écrans dans un widget SafeArea pour empêcher vos textes d’être masqués par l’encoche de caméra (notch) ou la barre de navigation système.

PreviousNext