🛢️Parcours Fioul GroupéFlutter · Chapitre 09
Accueil › Flutter › Chapitre 09
Chapitre 09 / 19

Fonctionnement approfondi de Flutter

Comprendre ce qui se passe sous le capot : les trois arbres (Widget/Element/RenderObject), le rôle du BuildContext, des keys, et l'accès au contexte (MediaQuery, Theme).

1 Notion

Widget, Element, RenderObject

Flutter maintient trois arbres : les Widgets (descriptions immuables et jetables), les Elements (instances vivantes qui font le lien), les RenderObjects (qui mesurent et dessinent). On travaille avec les widgets ; Flutter gère le reste.

Pourquoi c'est efficace — reconstruire des widgets est bon marché ; Flutter réutilise les Elements et ne redessine que ce qui a changé.
2 Notion

Le BuildContext

Le context reçu dans build() est la position du widget dans l'arbre. Il sert à remonter l'arbre pour trouver des données (thème, navigateur, providers).

3 Notion

Les keys

Une Key aide Flutter à identifier un widget quand une liste change (réordonnancement, suppression). En général optionnelles ; utiles pour préserver l'état d'éléments dans une liste dynamique.

4 Notion

MediaQuery & Theme

Via le context : MediaQuery.of(context).size donne la taille de l'écran (pour un design responsive) ; Theme.of(context) donne les couleurs/typo du thème.

final largeur = MediaQuery.of(context).size.width;
final couleur = Theme.of(context).colorScheme.primary;
🛢️ Sur le projet Fioul Groupé

Rends la liste des campagnes adaptable : une colonne sur téléphone, une grille sur tablette (via MediaQuery). Utilise Theme.of(context) pour la couleur de la jauge, plutôt que des couleurs en dur.

À retenir
  • Trois arbres : Widget (jetable) / Element (vivant) / RenderObject (dessin).
  • Le BuildContext localise le widget et donne accès à l'arbre.
  • MediaQuery (taille écran) et Theme.of (thème) via le context.
← Chapitre 08