Flutter Riverpod • Un nouveau souffle pour la gestion d’état
Flutter, le SDK de Google pour créer des applications mobiles natives et multiplateformes, a connu un succès fulgurant grâce à sa facilité d’utilisation et ses performances.
Pour gérer efficacement l’état de vos applications Flutter, de nombreux outils ont vu le jour. Parmi eux, Riverpod s’est rapidement imposé comme une alternative puissante.
Réalisé par le français Rémi Rousselet, créateur de Provider, utilisé comme base pour Riverpod.
Dans cet article, nous allons explorer en détail Riverpod, ses avantages par rapport aux autres solutions de gestion d’état, et comment l’intégrer dans votre projet Flutter.
Qu’est-ce que Riverpod ?
Riverpod est une bibliothèque de gestion d’état pour Flutter qui propose une approche simple et intuitive pour partager des données à travers votre application. Il s’agit d’une évolution de Provider, offrant des fonctionnalités supplémentaires et une architecture plus propre.
Les principaux avantages de Riverpod
- Simplicité : Riverpod rend la gestion d’état plus facile à comprendre et à mettre en oeuvre grâce à sa syntaxe concise et à sa structure claire.
- Flexibilité : Il offre une grande flexibilité pour gérer différents types d’état, des simples valeurs aux objets complexes.
- Performances : Riverpod est optimisé pour offrir des performances élevées, en particulier dans les grandes applications.
Les bases de Riverpod
Providers
Un Provider est l’élément central de Riverpod. Il définit une valeur qui peut être partagée dans votre application. Peut être utilisé pour de l’injection de dépendances.
final myProvider = Provider((ref) {
return MyValue();
});
Consumers
Un Consumer est utilisé pour lire la valeur d’un Provider dans un widget.
Consumer(
builder: (context, ref, child) {
final count = ref.watch(counterProvider);
return Text('You have pushed the button $count times.');
},
)
StateNotifierProvider
Ce type de Provider est idéal pour gérer un état mutable. Il vous permet de créer des classes qui encapsulent la logique de mise à jour de l’état.
final counterProvider = StateNotifierProvider<CounterNotifier, int>((ref) {
return CounterNotifier();
});
Les Annotations et Générateurs Riverpod
Les annotations Riverpod sont des métadonnées que vous ajoutez à votre code pour fournir des informations supplémentaires à la bibliothèque Riverpod.
Elles permettent notamment de :
- Déclarer des Providers : Vous pouvez annoter une classe pour indiquer qu’elle représente un Provider.
- Spécifier le type de Provider : Vous pouvez préciser si un Provider est un StateNotifierProvider, un FutureProvider, etc.
- Configurer des options supplémentaires : Les annotations peuvent être utilisées pour personnaliser le comportement des Providers.
Les générateurs Riverpod sont des outils qui permettent de générer automatiquement du code à partir d’annotations.
Exemple :
@riverpod
Future<String> boredSuggestion(Ref ref) async {
final response = await http.get(
Uri.https('boredapi.com', '/api/activity'),
);
final json = jsonDecode(response.body) as Map;
return json['activity']! as String;
}
Dans cet exemple, l’annotation @riverpod indique que boredSuggestion est un Provider.
Après avoir configuré votre projet avec les librairies riverpod_annotation, riverpod_generator et build_runner, vous pouvez exécuter la commande dart run build_runner build pour générer le code.
Le générateur créera automatiquement un fichier my_providers.g.dart qui contiendra l’implémentation du Provider.
Consommation avec Flutter Riverpod
Pour simplifier l’intégration de Riverpod dans vos widgets, il existe également la librairie flutter_riverpod.
Exemple
class Home extends ConsumerWidget {
@override
Widget build(BuildContext context, WidgetRef ref)
{
final boredSuggestion = ref.watch(boredSuggestionProvider);
// Perform a switch-case on the result to handle loading/error states
return switch (boredSuggestion) {
AsyncData(:final value) => Text('data: $value'),
AsyncError(:final error) => Text('error: $error'),
_ => const Text('loading'),
};
}
}
Dans cet exemple, le ConsumerWidget est un StatelessWidget mais donnant l’objet WidgetRef de Riverpod dans la method build.
Pourquoi choisir Riverpod ?
- Architecture plus propre : Riverpod favorise une architecture plus découplée et testable.
- Moins de boilerplate : Il réduit la quantité de code nécessaire pour gérer l’état.
- Meilleure performance : Riverpod offre des performances supérieures dans certains scénarios.
- Communauté active : La communauté Riverpod est très active et fournit une excellente documentation.
Conclusion
Riverpod est un outil puissant et flexible pour gérer l’état dans vos applications Flutter. Il simplifie considérablement le développement. En adoptant Riverpod, vous pouvez créer des applications Flutter plus performantes, plus maintenables et plus faciles à tester.
Pour aller plus loin
Documentation officielle :
Librairies utilisées :
Tutoriels en ligne :