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

Widgets relatifs aux listes

Afficher des collections : ListView et surtout ListView.builder pour des listes issues de données, ListTile pour une ligne toute faite, et GridView pour une grille.

1 Notion

ListView, la liste défilante

ListView affiche une liste qui défile. Pour un petit nombre d'éléments connus, on passe directement children.

2 Notion

ListView.builder pour des données

Pour une liste issue d'une collection (les campagnes), ListView.builder construit les éléments à la demande (performant, même pour de longues listes).

ListView.builder(
  itemCount: campagnes.length,
  itemBuilder: (context, i) {
    final c = campagnes[i];
    return CarteCampagne(c);
  },
)
3 Notion

ListTile, une ligne prête

ListTile propose une ligne standard : leading (icône/avatar), title, subtitle, trailing, et onTap.

ListTile(
  leading: const Icon(Icons.local_gas_station),
  title: Text(c.zone),
  subtitle: Text('${c.volumeTotal} L'),
  trailing: Text('${c.prixLitre} €/L'),
  onTap: () { /* détail */ },
)
4 Notion

GridView

GridView.builder affiche les éléments en grille (plusieurs colonnes), utile pour des vignettes.

🛢️ Sur le projet Fioul Groupé

Affiche la liste des campagnes avec ListView.builder et une Card/ListTile par campagne (zone, volume, prix, tap → détail). Pour l'instant les données peuvent être en dur ; on les branchera sur l'API au chapitre 13.

À retenir
  • ListView.builder pour les listes de données (à la demande).
  • ListTile = ligne prête (leading/title/subtitle/trailing/onTap).
  • GridView.builder pour une grille.
← Chapitre 06