Flutter · Chapitre 05 — Introduction à Material

1 Notion

MaterialApp, la racine

MaterialApp englobe l'application : elle apporte le style Material, la navigation, le thème et la locale.

MaterialApp(
  title: 'Fioul Groupé',
  home: AccueilScreen(),
)

2 Notion

Scaffold, la structure d'écran

Scaffold fournit la charpente d'un écran : appBar (haut), body (contenu), floatingActionButton, bottomNavigationBar, drawer.

Scaffold(
  appBar: AppBar(title: const Text('Campagnes')),
  body: /* la liste */,
)

3 Notion

AppBar & FloatingActionButton

L'AppBar porte le titre et des actions ; le FloatingActionButton est le bouton d'action principal (ex. « nouvelle campagne » pour un coordinateur).

floatingActionButton: FloatingActionButton(
  onPressed: () {},
  child: const Icon(Icons.add),
)

4 Notion

Les boutons

ElevatedButton (bouton plein), TextButton (plat), OutlinedButton (contour). Tous prennent onPressed et un child.

ElevatedButton(onPressed: () {}, child: const Text('Rejoindre'))

5 Notion

Le thème

On centralise couleurs et polices dans ThemeData (couleur d'accent, mode clair/sombre), appliqué à toute l'appli via MaterialApp.

theme: ThemeData(colorSchemeSeed: Colors.teal, useMaterial3: true)

🛢️ Sur le projet Fioul Groupé

Monte le squelette de l'appli : MaterialApp + Scaffold avec une AppBar « Fioul Groupé », un thème aux couleurs du projet, et un FloatingActionButton (réservé au coordinateur, plus tard). Tu tiens la coquille de tous les écrans à venir.

À retenir

MaterialApp (racine) → Scaffold (écran) → AppBar/body/FAB.
Boutons : Elevated / Text / Outlined, avec onPressed.
Thème centralisé dans ThemeData.