Skip to content
Snippets Groups Projects
Commit e9d43e7b 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 #79196 passed
# Riverpod par la pratique : Intégration avec Flutter # 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. 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. 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 ## Intégration dans une application
...@@ -10,7 +10,7 @@ Dans Flutter, tout est widget. ...@@ -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. 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 : 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 ```dart
final helloProvider = Provider<String>((ref) => 'Hello world'); // <1> final helloProvider = Provider<String>((ref) => 'Hello world'); // <1>
...@@ -41,7 +41,7 @@ class MyExample extends StatelessWidget { ...@@ -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>`. Un `Provider` est défini pour retourner `'Hello world'` `<1>`.
Les états sont disponibles pour les widgets enfants à partir du parent `ProviderScope` `<2>`. 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. ...@@ -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. 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 : 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 ```dart
final countServiceProvider = StateNotifierProvider<CountService, int>((ref) => CountService(42)); // <1> final countServiceProvider = StateNotifierProvider<CountService, int>((ref) => CountService(42)); // <1>
...@@ -117,7 +117,7 @@ class Counter extends ConsumerWidget { // <4> ...@@ -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>`. 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>`. 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 ...@@ -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 : 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 ```dart
final countServiceProvider = StateNotifierProvider<CountService, int>((ref) => CountService(42)); // <1> final countServiceProvider = StateNotifierProvider<CountService, int>((ref) => CountService(42)); // <1>
...@@ -199,7 +199,7 @@ class _CounterState extends ConsumerState<Counter> { // <4> ...@@ -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>`. Le service et le provider associé sont identiques à l'exemple précédent `<1>`.
Au niveau du widget, la classe `ConsumerStatefulWidget` remplace `StatefulWidget` `<2>`. 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 ...@@ -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é : 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 ```dart
final countServiceProvider = StateNotifierProvider<CountService, int>((ref) => CountService(42)); // <1> final countServiceProvider = StateNotifierProvider<CountService, int>((ref) => CountService(42)); // <1>
...@@ -310,7 +310,7 @@ class _CounterState extends ConsumerState<Counter> { ...@@ -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>`. 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>`. Un chiffre aléatoire est retourné par le `Provider` `randomProvider` `<2>`.
......
...@@ -48,7 +48,6 @@ class App extends StatelessWidget { ...@@ -48,7 +48,6 @@ class App extends StatelessWidget {
GoRoute( GoRoute(
path: example.path, path: example.path,
builder: (_, __) => ExampleScreen(example), builder: (_, __) => ExampleScreen(example),
parentNavigatorKey: _rootNavigatorKey,
), ),
], ],
), ),
......
import 'package:article_flutter_riverpod/app.dart'; import 'package:article_flutter_riverpod/app.dart';
import 'package:article_flutter_riverpod/article_02/consumer_example.dart'; import 'package:article_flutter_riverpod/article_02/01_consumer_example.dart';
import 'package:article_flutter_riverpod/article_02/parent_example.dart'; import 'package:article_flutter_riverpod/article_02/04_parent_example.dart';
import 'package:article_flutter_riverpod/article_02/stateful_example.dart'; import 'package:article_flutter_riverpod/article_02/03_stateful_example.dart';
import 'package:article_flutter_riverpod/article_02/stateless_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/example.dart';
import 'package:article_flutter_riverpod/presentation/01_introduction_example.dart' as introduction_example; 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; 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