Développement d’applications mobile pour Android &
Ios
La gestion des états en Flutter
ASSOU Yao Mokpokpo
07/01/2026
ASSOU Yao Mokpokpo Développement d’applications mobile pour Android & Ios 07/01/2026 1 / 22
Objectifs du cours
À la fin de ce chapitre, l’étudiant sera capable de :
1 Comprendre la notion d’état (state) en Flutter
2 Distinguer un widget statique d’un widget dynamique
3 Utiliser correctement un StatefulWidget
4 Modifier l’interface utilisateur grâce à setState()
5 Implémenter une gestion d’état simple (compteur, bouton, texte)
ASSOU Yao Mokpokpo Développement d’applications mobile pour Android & Ios 07/01/2026 2 / 22
Introduction à la gestion des états
En Flutter, une application est composée de widgets.
Certains widgets sont figés, d’autres évoluent pendant l’exécution.
Lorsqu’un widget change de comportement ou d’apparence en fonction
d’une action de l’utilisateur, on parle alors de gestion des états.
ASSOU Yao Mokpokpo Développement d’applications mobile pour Android & Ios 07/01/2026 3 / 22
Qu’est-ce qu’un état (State) ?
Un état est une donnée qui peut changer dans le temps et qui influence
ce que l’utilisateur voit à l’écran.
Exemples d’état
Un compteur qui augmente
Un bouton activé / désactivé
Un texte qui change
Une checkbox cochée ou non
Si l’état change, l’interface doit être reconstruite.
ASSOU Yao Mokpokpo Développement d’applications mobile pour Android & Ios 07/01/2026 4 / 22
StatelessWidget et état
Rappel : StatelessWidget
Un StatelessWidget est un widget sans état.
Il ne peut pas changer après sa création.
Caractéristiques
Interface statique
Aucune donnée modifiable
Pas de setState()
ASSOU Yao Mokpokpo Développement d’applications mobile pour Android & Ios 07/01/2026 5 / 22
StatelessWidget et état
Exemple
class TexteStatique extends StatelessWidget {
const TexteStatique({[Link]});
@override
Widget build(BuildContext context) {
return const Text("Bonjour Flutter");
}
}
Le texte affiché ne changera jamais.
ASSOU Yao Mokpokpo Développement d’applications mobile pour Android & Ios 07/01/2026 6 / 22
StatefulWidget et état
Définition
Un StatefulWidget est un widget avec état. Il peut changer pendant
l’exécution grâce à un objet State.
Il est utilisé quand l’interface doit réagir aux actions de l’utilisateur.
ASSOU Yao Mokpokpo Développement d’applications mobile pour Android & Ios 07/01/2026 7 / 22
StatefulWidget et état
Structure d’un StatefulWidget
Un StatefulWidget est composé de deux classes :
1 La classe qui hérite de StatefulWidget
2 La classe State qui hérite de State
StatefulWidget
|
|--> createState()
|
|--> State
|
|--> build()
ASSOU Yao Mokpokpo Développement d’applications mobile pour Android & Ios 07/01/2026 8 / 22
Exemple simple : compteur
Objectif
1 Afficher un nombre
2 Cliquer sur un bouton pour augmenter ce nombre
ASSOU Yao Mokpokpo Développement d’applications mobile pour Android & Ios 07/01/2026 9 / 22
Exemple simple : compteur
Code complet
import 'package:flutter/[Link]';
void main() {
runApp(const MyApp());
}
ASSOU Yao Mokpokpo Développement d’applications mobile pour Android & Ios 07/01/2026 10 / 22
Exemple simple : compteur
Code complet
class MyApp extends StatelessWidget {
const MyApp({[Link]});
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: CounterPage(),
);
}}
ASSOU Yao Mokpokpo Développement d’applications mobile pour Android & Ios 07/01/2026 11 / 22
Exemple simple : compteur
Code complet
class CounterPage extends StatefulWidget {
const CounterPage({[Link]});
@override
State<CounterPage> createState() => _CounterPageState();
}
ASSOU Yao Mokpokpo Développement d’applications mobile pour Android & Ios 07/01/2026 12 / 22
Exemple simple : compteur
Code complet
class _CounterPageState extends State<CounterPage> {
int counter = 0; // état
void incrementCounter() {
setState(() {
counter++;
});
}
ASSOU Yao Mokpokpo Développement d’applications mobile pour Android & Ios 07/01/2026 13 / 22
Exemple simple : compteur
Code complet
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text("Gestion d'état")),
body: Center(
child: Text(
"Compteur : $counter",
style: const TextStyle(fontSize: 24),
),
),
floatingActionButton: FloatingActionButton(
onPressed: incrementCounter,
child: const Icon([Link]),
),);}
}
ASSOU Yao Mokpokpo Développement d’applications mobile pour Android & Ios 07/01/2026 14 / 22
Analyse du code
L’état
int counter = 0;
counter est une variable d’état Elle peut changer pendant l’exécution.
setState()
setState(() {
counter++;
});
ASSOU Yao Mokpokpo Développement d’applications mobile pour Android & Ios 07/01/2026 15 / 22
Analyse du code
setState()
setState() indique à Flutter que :
l’état a changé et l’interface doit être reconstruite
Sans setState(), l’interface ne se met pas à jour.
ASSOU Yao Mokpokpo Développement d’applications mobile pour Android & Ios 07/01/2026 16 / 22
Analyse du code
Utilisation de l’état dans l’interface
Text("Compteur : $counter")
ASSOU Yao Mokpokpo Développement d’applications mobile pour Android & Ios 07/01/2026 17 / 22
Règles importante à retenir
1 Un état se déclare dans la classe State
2 Toute modification de l’état doit être faite dans setState()
3 build() est automatiquement rappelée après setState()
4 Ne jamais modifier l’état directement sans setState()
ASSOU Yao Mokpokpo Développement d’applications mobile pour Android & Ios 07/01/2026 18 / 22
TAF (Travail à faire)
Exercice 1
Créer une application qui :
1 Affiche un texte “OFF”
2 Contient un bouton
3 Quand on clique sur le bouton :
4 le texte devient “ON”
5 puis alterne entre ON / OFF
ASSOU Yao Mokpokpo Développement d’applications mobile pour Android & Ios 07/01/2026 19 / 22
TAF (Travail à faire)
Solution
class _SwitchPageState extends State<SwitchPage> {
bool isOn = false;
void toggle() {
setState(() {
isOn = !isOn;
});
}
}
ASSOU Yao Mokpokpo Développement d’applications mobile pour Android & Ios 07/01/2026 20 / 22
TAF
Énoncé
Créer une application Flutter qui simule un mini compteur de panier.
Fonctionnalités attendues :
1 Un texte affichant Nombre d’articles : X
2 Deux boutons : Ajouter / Retirer
3 Un troisième texte affichant :
4 Statut : Vide / Panier actif
ASSOU Yao Mokpokpo Développement d’applications mobile pour Android & Ios 07/01/2026 21 / 22
TAF
Enoncé
Règles de gestion :
1 Le nombre d’articles ne doit jamais être négatif
2 Si le nombre est 0 - Statut = Vide
3 Si le nombre est supérieur à 0 - Statut = Panier actif
4 Le bouton Retirer est désactivé lorsque le panier est vide
États à gérer
int itemsCount
bool isEmpty
ASSOU Yao Mokpokpo Développement d’applications mobile pour Android & Ios 07/01/2026 22 / 22