Niveau: LISI2
Année universitaire:
2024– 2025
DÉVELOPPEMENT MOBILE
Chapitre3:
Gestion de l'État
Sabrine TOUMI
Introduction à la Gestion de l'État
➢ La gestion de l'état est essentielle dans toute application mobile.
➢ La gestion de l'état dans Flutter implique la manipulation des
données qui contrôlent le comportement et l'apparence des
widgets permet de gérer et de persister les données entre
les interactions de l'utilisateur.
➢ L'état représente les données actuelles d'une application
et peut être modifié dynamiquement
2
Sabrine TOUMI Développement Mobile LISI2 (2024-2025)
Introduction à la Gestion de l'État
➢ Pourquoi est-ce important ?
Expériences
Prévention des
Utilisateur
Bugs :
Dynamiques :
Cohérence et Une gestion
Permet aux
Réactivité : appropriée de l'état développeurs de créer
Assure que les aide à éviter les bugs des expériences
éléments de et les incohérences utilisateur complexes et
l'interface utilisateur dans le comportement dynamiques avec
reflètent fidèlement de l'application. aisance.
les changements de
données ou les
interactions de Impact sur les Performances :
l'utilisateur.
Le choix de la bonne approche de gestion de l'état
peut affecter de manière significative les
performances et l'évolutivité des applications
Flutter.
3
Sabrine TOUMI Développement Mobile LISI2 (2024-2025)
Introduction à la Gestion de l'État
Etat
Ephémère Global
(local state) (Application state)
• Concerne les changements • Partagé entre plusieurs widgets ou
d'UI temporaires, comme un pages de l'application. Exemples :
champ texte modifié ou un session utilisateur, panier d'achat,
bouton cliqué. préférences de l'application.
• Géré par StatefulWidget et • Nécessite un gestionnaire d'état
setState().
externe pour éviter les re-rendus
inutiles.
4
Sabrine TOUMI Développement Mobile LISI2 (2024-2025)
Les Approches de Gestion de l'État
• setState() : Méthode intégrée de Flutter pour gérer l'état local au sein d'un
widget. Elle déclenche une reconstruction du widget lorsque l'état change,
mettant ainsi à jour l'interface utilisateur en conséquence.
• Provider : Solution populaire de gestion de l'état qui utilise le mécanisme
InheritedWidget pour propager efficacement les changements dans
l'arborescence des widgets. Elle offre une manière simple et flexible de gérer
l'état local et global.
• Pattern BLoC (Business Logic Component) : Un modèle de conception qui
sépare la couche de présentation de la logique métier. Il utilise des flux
(streams) et la programmation réactive pour gérer l'état et traiter
efficacement les opérations asynchrones.
5
Sabrine TOUMI Développement Mobile LISI2 (2024-2025)
Les Approches de Gestion de l'État
• GetX : Une bibliothèque de gestion de l'état légère et puissante pour Flutter,
offrant une variété de fonctionnalités, y compris la gestion réactive de l'état,
l'injection de dépendances et la gestion des routes.
• Riverpod : Construit sur la base de Provider, Riverpod offre une syntaxe
alternative et des fonctionnalités supplémentaires pour la gestion de l'état,
telles que de meilleures capacités de test et des optimisations de
performances améliorées.
6
Sabrine TOUMI Développement Mobile LISI2 (2024-2025)
La méthode setState ()
• Méthode Intégrée de • Gestion Locale de • Déclencheur de
Flutter : setState() est l'État : Principalement Reconstruction de
une méthode fournie utilisée pour gérer Widget : Lorsqu'on appelle
par Flutter pour gérer l'état d'un seul widget setState(), Flutter
l'état d'un widget. ou d'un sous-arbre réexécute la méthode
restreint de widgets build du widget, mettant
au sein d'une à jour l'interface
application Flutter. utilisateur pour refléter
les changements d'état.
7
Sabrine TOUMI Développement Mobile LISI2 (2024-2025)
La méthode setState ()
Exemple de code:
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
8
Sabrine TOUMI Développement Mobile LISI2 (2024-2025)
La méthode setState ()
Avantages Inconvénients
Simplicité : la méthode est simple et direct, Portée Limitée : Restreint à la gestion de l'état au
ce qui le rend adapté aux débutants pour sein d'un seul widget ou de son sous-arbre,
gérer l'état au sein de widgets individuels. moins adapté pour une gestion d'état complexe à
travers plusieurs widgets.
Mises à Jour Immédiates de l'UI : Il Problèmes de Performance : La reconstruction
déclenche des mises à jour immédiates de du sous-arbre de widgets à chaque appel de peut
l'interface utilisateur, bénéfique pour les entraîner des problèmes de performance,
petites modifications nécessitant un retour surtout dans des applications avec des
en temps réel. hiérarchies de widgets profondes.
Compatibilité : En tant que méthode Usage Limité aux Widgets avec État : Ne peut
intégrée de Flutter, elle assure compatibilité être utilisé qu'au sein de widgets avec état,
et fiabilité à travers différents projets. rendant son utilisation inappropriée pour les
widgets sans état et nécessitant du code
supplémentaire pour la gestion de l'état.
9
Sabrine TOUMI Développement Mobile LISI2 (2024-2025)
Le modèle BLoC pattern
• BLoC (Business Logic Component): encourage la séparation stricte de la
logique d’affaires et de l’interface utilisateur. Cette séparation permet
un développement plus propre et plus maintenable, en particulier pour les
grandes applications.
• BLoC utilisent des flux “streams” pour communiquer les changements
d’états, permettant des mises à jour réactives de l’UI. Cela permet une
expérience utilisateur plus réactive et efficace.
• Ils servent de source uniques de vérité, garantissant la cohérence à travers
l’UI, simplifiant la maintenance et favorisant l’évoluvité et la réutilisabilité.
10
Sabrine TOUMI Développement Mobile LISI2 (2024-2025)
Le modèle BLoC pattern
Architecture BLoC : Comment ça Fonctionne ?
1. Déclarations des événements (Events) : Déclenchés par l'utilisateur (par
exemple, un bouton cliqué).
abstract class CounterEvent {}
class IncrementEvent extends CounterEvent {}
class DecrementEvent extends CounterEvent {}
2. Définition du BLoC : Reçoit l'événement, traite la logique et émet un
nouvel état..
class CounterBloc extends Bloc<CounterEvent, int> {
CounterBloc() : super(0) {
on<IncrementEvent>((event, emit) => emit(state + 1));
on<DecrementEvent>((event, emit) => emit(state - 1));
}
}
11
Sabrine TOUMI Développement Mobile LISI2 (2024-2025)
Le modèle BLoC pattern
Architecture BLoC : Comment ça Fonctionne ?
3. Flux d'État (State Stream) : Envoie les nouvelles données aux widgets.
BlocProvider(
create: (context) => CounterBloc
::contentReference[oaicite:0]{index=0}
4. Widgets : Réagissent automatiquement aux changements d'état.
12
Sabrine TOUMI Développement Mobile LISI2 (2024-2025)
Le modèle BLoC pattern
Avantages Inconvénients
Séparation claire des préoccupations : Courbe d’apprentissage élevée : Nécessite une
Sépare la logique métier de l'interface bonne compréhension des Streams et de la
utilisateur, rendant le code plus programmation réactive (RxDart).
modulaire et maintenable.
Réutilisabilité du code : Les blocs peuvent Complexité accrue : Peut être excessif pour de
être réutilisés dans plusieurs parties de petites applications où une approche plus simple
l'application. suffirait.
Facilité de test : Permet d’écrire des tests Boilerplate important : Nécessite l’écriture de
unitaires et de s’assurer que la logique beaucoup de code pour la gestion des
métier fonctionne correctement événements et des états.
indépendamment de l’UI,
Amélioration des performances : Réduit Débogage plus difficile : Tracer les flux
le rafraîchissement inutile des widgets d’événements et d’états peut être complexe,
grâce à une gestion optimisée de l’état. surtout dans les applications volumineuses.
13
Sabrine TOUMI Développement Mobile LISI2 (2024-2025)
Le package Provider
➢ Le Provider est un package basé sur InheritedWidget, qui permet
de partager l'état et la logique métier entre différents widgets de
l’application, de manière efficace et optimisée.
➢ Ses principes de base sont:
• Provider comme conteneur d’état : Il stocke et expose l’état de
l’application.
• Notification automatique : Lorsque l’état change, tous les widgets
qui en dépendent sont mis à jour.
• Facilité d'utilisation : Il remplace les approches plus complexes
comme setState() ou InheritedWidget.
14
Sabrine TOUMI Développement Mobile LISI2 (2024-2025)
Le package Provider
15
Sabrine TOUMI Développement Mobile LISI2 (2024-2025)
Le package Provider
Type de Provider Description
Provider Fournit une valeur statique, utile pour des objets
immuables.
ChangeNotifierProvider Utilisé avec un ChangeNotifier pour notifier les
changements d’état aux widgets.
MultiProvider Permet d’injecter plusieurs providers en même temps.
FutureProvider Gère les valeurs provenant d’un Future, idéal pour les
requêtes asynchrones.
StreamProvider Gère les valeurs provenant d’un Stream, utile pour les
mises à jour en temps réel.
16
Sabrine TOUMI Développement Mobile LISI2 (2024-2025)
Le package Provider
17
Sabrine TOUMI Développement Mobile LISI2 (2024-2025)
Le package Provider
Avantages Inconvénients
Facile à apprendre et à implémenter. Peut devenir complexe avec des
architectures avancées
Optimisé pour la performance grâce Pas toujours adapté aux très grandes
à ChangeNotifier applications
Meilleure lisibilité du code Moins structuré que BLoC
S'intègre bien avec Flutter sans Moins robuste pour des logiques métiers
surcharge excessive complexes
18
Sabrine TOUMI Développement Mobile LISI2 (2024-2025)
Le package Riverpod
➢ Riverpod est une solution moderne et optimisée pour la gestion
d’état dans Flutter, développée par le créateur de Provider. Elle
corrige certaines limites de Provider en offrant plus de flexibilité,
sécurité et testabilité.
• Indépendant de l'arbre des widgets : Contrairement à Provider,
Riverpod ne dépend pas directement de l’arbre des widgets, ce qui
simplifie la gestion des états globaux.
• Pas besoin de BuildContext : Permet d’accéder aux providers depuis
n'importe où, même en dehors de l'UI.
• Typé et sécurisé : Empêche certaines erreurs courantes comme
l’accès accidentel à un Provider supprimé. 19
Sabrine TOUMI Développement Mobile LISI2 (2024-2025)
Le package Riverpod
import 'package:flutter/[Link]';
import 'package:flutter_riverpod/flutter_riverpod.dart';
// Définition d'un StateProvider pour un compteur
final counterProvider = StateProvider<int>((ref) => 0);
void main() {
runApp(ProviderScope(child: MyApp())); // Nécessaire pour utiliser Riverpod
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: CounterScreen(),
);
}
}
class CounterScreen extends ConsumerWidget {
@override
Widget build(BuildContext context, WidgetRef ref) {
final counter = [Link](counterProvider); // Observer les changements d’état
return Scaffold(
appBar: AppBar(title: Text("Riverpod Example")),
body: Center(
child: Text('Compteur: $counter', style: TextStyle(fontSize: 24)),
),
floatingActionButton: FloatingActionButton(
onPressed: () => [Link]([Link]).state++, // Modifier l’état
child: Icon([Link]),
),
);
}
20
}
Le package GetX
➢ GetX est un package léger et puissant qui offre une gestion d'état,
une navigation et une gestion des dépendances dans un seul package.
Il est un framework tout-en-un pour Flutter.
➢ Il offre plusieurs avantages:
• Simplicité : Moins de code, plus de productivité. Pas besoin de
BuildContext ou de ChangeNotifier.
• Performance optimisée : Mise à jour des widgets uniquement
lorsqu’ils en ont besoin, réduisant ainsi les reconstructions inutiles.
• Gestion des routes intégrée : Pas besoin d’utiliser
[Link](), GetX fournit une navigation fluide et simplifiée.
21
Sabrine TOUMI Développement Mobile LISI2 (2024-2025)
Le package GetX
import 'package:flutter/[Link]';
import 'package:get/[Link]';
// Définition d’un contrôleur pour gérer l’état
class CounterController extends GetxController {
var count = [Link]; // .obs rend la variable réactive
void increment() => count++;
}
void main() {
runApp(GetMaterialApp(home: CounterScreen())); // Utilisation de GetMaterialApp
}
class CounterScreen extends StatelessWidget {
final CounterController counterController = [Link](CounterController()); // Injection
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("GetX Example")),
body: Center(
child: Obx(() => Text(
'Compteur: ${[Link]}',
style: TextStyle(fontSize: 24),
)),
),
floatingActionButton: FloatingActionButton(
onPressed: [Link],
child: Icon([Link]),
),
);
}
} 22
Sabrine TOUMI Développement Mobile LISI2 (2024-2025)
Comparaison des Méthodes de Gestion d’État
Critère setState BLoC Provider Riverpod GetX
Simplicité Très simple Complexe Modérée Modérée Très
simple
Boilerplate Faible Élevé Modéré Faible Très faible
Performance Faible Excellente Bonne Très bonne Excellente
Dépendance au Oui Non Oui Non Non
BuildContext
Scalabilité Mauvaise Excellente Bonne Excellente Moyenne
23
Sabrine TOUMI Développement Mobile LISI2 (2024-2025)
Quelle méthode choisir ?
➢ setState() → Idéal pour les états simples et locaux sur un seul widget.
➢ BLoC → Parfait pour les grandes applications nécessitant une architecture
robuste et organisée.
➢ Provider → Solution équilibrée pour les applications de taille moyenne avec
une gestion d’état modérée.
➢ GetX → Solution ultra-rapide et simple, idéale pour les MVPs et applications
légères.
➢ Riverpod → Approche moderne, optimisée et sécurisée, idéale pour les
applications évolutives.
➔ Choisissez la méthode qui correspond à la complexité et aux besoins de
votre projet !
24
Sabrine TOUMI Développement Mobile LISI2 (2024-2025)