diff --git a/docs/02_integration_avec_flutter.md b/docs/02_integration_avec_flutter.md index 969ad8fe3e48910efd922da72d4585a431768e31..ed8e8cd30a03ba0b442e3c0403d99dc457b336d8 100644 --- a/docs/02_integration_avec_flutter.md +++ b/docs/02_integration_avec_flutter.md @@ -1,7 +1,7 @@ # 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 { } ``` -[](http://adbonnin.pages-gitlab.ippon.fr/article_flutter_riverpod/#/consumer) +[](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> } ``` -[](http://adbonnin.pages-gitlab.ippon.fr/article_flutter_riverpod/#/stateless) +[](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> } ``` -[](http://adbonnin.pages-gitlab.ippon.fr/article_flutter_riverpod/#/stateful) +[](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> { } ``` -[](http://adbonnin.pages-gitlab.ippon.fr/article_flutter_riverpod/#/parent-providerscope) +[](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>`. diff --git a/lib/article_02/consumer_example.dart b/lib/article_02/01_consumer_example.dart similarity index 100% rename from lib/article_02/consumer_example.dart rename to lib/article_02/01_consumer_example.dart diff --git a/lib/article_02/stateless_example.dart b/lib/article_02/02_stateless_example.dart similarity index 100% rename from lib/article_02/stateless_example.dart rename to lib/article_02/02_stateless_example.dart diff --git a/lib/article_02/stateful_example.dart b/lib/article_02/03_stateful_example.dart similarity index 100% rename from lib/article_02/stateful_example.dart rename to lib/article_02/03_stateful_example.dart diff --git a/lib/article_02/parent_example.dart b/lib/article_02/04_parent_example.dart similarity index 100% rename from lib/article_02/parent_example.dart rename to lib/article_02/04_parent_example.dart diff --git a/lib/main.dart b/lib/main.dart index 438938f7de20f7392c00ab31344aa69cb4a87495..fff6b4eb081963ed5df6f1a9d5765a8d0bcca214 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -1,8 +1,8 @@ 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;