Skip to content
Snippets Groups Projects
Commit 88235eee authored by Adrien BONNIN's avatar Adrien BONNIN
Browse files

:recycle: Refactoring du nom des fichiers de sources pour l'article 02

parent 34402998
No related branches found
No related tags found
No related merge requests found
Pipeline #79195 passed
# Riverpod par la pratique : Intégration avec Flutter
Cet article à pour objectif de vous faire découvrir l'intégration de Riverpod dans une application Flutter.
Il fait suite au précédent article sur la découverte des bases et s'appuie sur ces notions pour en ajouter de nouvelles.
Il fait suite au [précédent article sur la découverte des bases](https://blog.ippon.fr/2022/09/14/riverpod-par-la-pratique-decouverte-des-bases/) et s'appuie sur ces notions pour en ajouter de nouvelles.
Le code source est disponible sur le [GitLab Ippon](https://gitlab.ippon.fr/adbonnin/article_flutter_riverpod/-/tree/main/lib/article_02) et les exemples sur la [GitLab page](http://adbonnin.pages-gitlab.ippon.fr/article_flutter_riverpod/#/) associée.
## Intégration dans une application
......@@ -10,7 +10,7 @@ Dans Flutter, tout est widget.
En suivant ce principe, Riverpod s'adapte à Flutter avec le widget `ProviderScope` dont la responsabilité est de partager les états qu'il contient à ses widgets enfants.
Plusieurs manières permettent d'accéder à ces états, le widget `Consumer` étant la solution la moins intrusive :
[_source : consumer_example.dart_](https://gitlab.ippon.fr/adbonnin/article_flutter_riverpod/-/blob/main/lib/article_02/consumer_example.dart)
[_source : 01_consumer_example.dart_](https://gitlab.ippon.fr/adbonnin/article_flutter_riverpod/-/blob/main/lib/article_02/01_consumer_example.dart)
```dart
final helloProvider = Provider<String>((ref) => 'Hello world'); // <1>
......@@ -41,7 +41,7 @@ class MyExample extends StatelessWidget {
}
```
[![consumer](images/consumer.png)](http://adbonnin.pages-gitlab.ippon.fr/article_flutter_riverpod/#/consumer)
[![consumer](images/consumer.png)](http://adbonnin.pages-gitlab.ippon.fr/article_flutter_riverpod/#/article_01/consumer)
Un `Provider` est défini pour retourner `'Hello world'` `<1>`.
Les états sont disponibles pour les widgets enfants à partir du parent `ProviderScope` `<2>`.
......@@ -67,7 +67,7 @@ Pour des cas plus complexes, Riverpod dispose de widgets spécifiques.
L'autre solution proposée par `Riverpod` pour accéder au `WidgetRef` est de remplacer à la déclaration la classe étendue.
La classe `ConsumerWidget` vient remplacer `StatelessWidget` pour les widgets sans états :
[_source : stateless_example.dart_](https://gitlab.ippon.fr/adbonnin/article_flutter_riverpod/-/blob/main/lib/article_02/stateless_example.dart)
[_source : 02_stateless_example.dart_](https://gitlab.ippon.fr/adbonnin/article_flutter_riverpod/-/blob/main/lib/article_02/02_stateless_example.dart)
```dart
final countServiceProvider = StateNotifierProvider<CountService, int>((ref) => CountService(42)); // <1>
......@@ -117,7 +117,7 @@ class Counter extends ConsumerWidget { // <4>
}
```
[![stateless](images/stateless.png)](http://adbonnin.pages-gitlab.ippon.fr/article_flutter_riverpod/#/stateless)
[![stateless](images/stateless.png)](http://adbonnin.pages-gitlab.ippon.fr/article_flutter_riverpod/#/article_01/stateless)
Un `StateNotifierProvider` est déclaré `<1>` pour le service `CountService` `<2>`.
Ce service est un `StateNotifier` dont le state est un nombre qui peut être incrémenté en appelant la méthode `increment` `<3>`.
......@@ -134,7 +134,7 @@ Comme pour le `BuildContext`, ce `WidgetRef` est à passer aux méthodes qui ont
Le `ConsumerWidget` venant remplacer le `StatelessWidget`, c'est tout naturellement que le `StatefulWidget` dispose de sa propre implémentation :
[_source : stateful_example.dart_](https://gitlab.ippon.fr/adbonnin/article_flutter_riverpod/-/blob/main/lib/article_02/stateful_example.dart)
[_source : 03_stateful_example.dart_](https://gitlab.ippon.fr/adbonnin/article_flutter_riverpod/-/blob/main/lib/article_02/03_stateful_example.dart)
```dart
final countServiceProvider = StateNotifierProvider<CountService, int>((ref) => CountService(42)); // <1>
......@@ -199,7 +199,7 @@ class _CounterState extends ConsumerState<Counter> { // <4>
}
```
[![stateful](images/stateful.png)](http://adbonnin.pages-gitlab.ippon.fr/article_flutter_riverpod/#/stateful)
[![stateful](images/stateful.png)](http://adbonnin.pages-gitlab.ippon.fr/article_flutter_riverpod/#/article_01/stateful)
Le service et le provider associé sont identiques à l'exemple précédent `<1>`.
Au niveau du widget, la classe `ConsumerStatefulWidget` remplace `StatefulWidget` `<2>`.
......@@ -219,7 +219,7 @@ C'est par exemple le cas pour récupérer ponctuellement un état `<7>` ou appel
Le widget `ProviderScope` est un conteneur qui peut avoir en descendance un autre `ProviderScope` pour former un lien de parenté :
[_source : parent_example.dart_](https://gitlab.ippon.fr/adbonnin/article_flutter_riverpod/-/blob/main/lib/article_02/parent_example.dart)
[_source : 04_parent_example.dart_](https://gitlab.ippon.fr/adbonnin/article_flutter_riverpod/-/blob/main/lib/article_02/04_parent_example.dart)
```dart
final countServiceProvider = StateNotifierProvider<CountService, int>((ref) => CountService(42)); // <1>
......@@ -310,7 +310,7 @@ class _CounterState extends ConsumerState<Counter> {
}
```
[![parent_provider_scope](images/parent_provider_scope.png)](http://adbonnin.pages-gitlab.ippon.fr/article_flutter_riverpod/#/parent-providerscope)
[![parent_provider_scope](images/parent_provider_scope.png)](http://adbonnin.pages-gitlab.ippon.fr/article_flutter_riverpod/#/article_01/parent-providerscope)
Le service et le provider associé sont identiques à l'exemple précédent `<1>`.
Un chiffre aléatoire est retourné par le `Provider` `randomProvider` `<2>`.
......
import 'package:article_flutter_riverpod/app.dart';
import 'package:article_flutter_riverpod/article_02/consumer_example.dart';
import 'package:article_flutter_riverpod/article_02/parent_example.dart';
import 'package:article_flutter_riverpod/article_02/stateful_example.dart';
import 'package:article_flutter_riverpod/article_02/stateless_example.dart';
import 'package:article_flutter_riverpod/article_02/01_consumer_example.dart';
import 'package:article_flutter_riverpod/article_02/04_parent_example.dart';
import 'package:article_flutter_riverpod/article_02/03_stateful_example.dart';
import 'package:article_flutter_riverpod/article_02/02_stateless_example.dart';
import 'package:article_flutter_riverpod/example.dart';
import 'package:article_flutter_riverpod/presentation/01_introduction_example.dart' as introduction_example;
import 'package:article_flutter_riverpod/presentation/02_provider_example.dart' as provider_example;
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment