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

Date, BottomNavigationBar & cycle de vie

Manipuler les dates (utile pour les dates limites), organiser l'appli en onglets avec la barre du bas, et comprendre le cycle de vie d'un widget à état.

1 Notion

DateTime

DateTime représente une date/heure ; on calcule des écarts avec Duration et on compare avec isBefore/isAfter.

final limite = DateTime.parse('2026-11-30');
final ouverte = DateTime.now().isBefore(limite);
2 Notion

Formater avec intl

Le paquet intl met en forme dates et nombres selon la locale (français).

DateFormat('d MMMM yyyy', 'fr').format(limite);  // 30 novembre 2026
3 Notion

BottomNavigationBar

La barre d'onglets en bas de l'écran : on garde l'index sélectionné dans l'état et on affiche l'écran correspondant.

bottomNavigationBar: BottomNavigationBar(
  currentIndex: _index,
  onTap: (i) => setState(() => _index = i),
  items: const [
    BottomNavigationBarItem(icon: Icon(Icons.list), label: 'Campagnes'),
    BottomNavigationBarItem(icon: Icon(Icons.person), label: 'Profil'),
  ],
)
4 Notion

Le cycle de vie d'un State

Les méthodes clés d'un State : initState() (une fois, au début — idéal pour lancer un chargement), build() (à chaque rendu), dispose() (nettoyage : contrôleurs, abonnements).

🛢️ Sur le projet Fioul Groupé

Affiche la date limite formatée en français sur chaque carte, calcule si la campagne est encore ouverte, et organise l'appli en onglets (Campagnes / Mes commandes / Profil) avec une BottomNavigationBar. Charge les campagnes dans initState() (chapitre 13).

À retenir
  • DateTime + intl (DateFormat) pour les dates en français.
  • BottomNavigationBar pour les onglets (index dans l'état).
  • Cycle de vie : initState / build / dispose.
← Chapitre 07