Builders Academy
Flutter — Développement Cross-Platform
2 of 3

Chapitre 1 · Leçon 2

Riverpod

State management réactif et testable

Section 1

Providers Riverpod

Step 1

Provider et StateNotifierProvider

Riverpod propose plusieurs types de providers selon le besoin. provider pour les valeurs calculées, StateNotifierProvider pour les états complexes, FutureProvider pour les données asynchrones.

tutorial_provider.dart

dart
1import 'package:riverpod_annotation/riverpod_annotation.dart';
2
3part 'tutorial_provider.g.dart';
4
5// Provider simple — valeur calculée
6
7TutorialRepository tutorialRepository(TutorialRepositoryRef ref) {
8  return TutorialRepository(ref.watch(httpClientProvider));
9}
10
11// FutureProvider — données asynchrones
12
13Future<List<Tutorial>> tutorials(TutorialsRef ref) async {
14  final repo = ref.watch(tutorialRepositoryProvider);
15  return repo.fetchAll();
16}
17
18// FutureProvider avec paramètre
19
20Future<Tutorial> tutorialBySlug(
21  TutorialBySlugRef ref,
22  String slug,
23) async {
24  final repo = ref.watch(tutorialRepositoryProvider);
25  return repo.findBySlug(slug);
26}
27
28// StateNotifier — état complexe avec actions
29
30class ProgressNotifier extends _$ProgressNotifier {
31  
32  Map<String, bool> build() => {}; // slug -> completed
33
34  void markCompleted(String lessonSlug) {
35    state = {...state, lessonSlug: true};
36  }
37
38  void markUncompleted(String lessonSlug) {
39    state = {...state, lessonSlug: false};
40  }
41
42  bool isCompleted(String lessonSlug) => state[lessonSlug] ?? false;
43}

Step 2

ConsumerWidget — lire les providers

Remplace StatelessWidget par ConsumerWidget pour accéder aux providers. ref.watch observe les changements, ref.read lit une seule fois.

tutorial_provider.dart

dart
1import 'package:riverpod_annotation/riverpod_annotation.dart';
2
3part 'tutorial_provider.g.dart';
4
5// Provider simple — valeur calculée
6
7TutorialRepository tutorialRepository(TutorialRepositoryRef ref) {
8  return TutorialRepository(ref.watch(httpClientProvider));
9}
10
11// FutureProvider — données asynchrones
12
13Future<List<Tutorial>> tutorials(TutorialsRef ref) async {
14  final repo = ref.watch(tutorialRepositoryProvider);
15  return repo.fetchAll();
16}
17
18// FutureProvider avec paramètre
19
20Future<Tutorial> tutorialBySlug(
21  TutorialBySlugRef ref,
22  String slug,
23) async {
24  final repo = ref.watch(tutorialRepositoryProvider);
25  return repo.findBySlug(slug);
26}
27
28// StateNotifier — état complexe avec actions
29
30class ProgressNotifier extends _$ProgressNotifier {
31  
32  Map<String, bool> build() => {}; // slug -> completed
33
34  void markCompleted(String lessonSlug) {
35    state = {...state, lessonSlug: true};
36  }
37
38  void markUncompleted(String lessonSlug) {
39    state = {...state, lessonSlug: false};
40  }
41
42  bool isCompleted(String lessonSlug) => state[lessonSlug] ?? false;
43}

Topics and skills covered

  • Flutter
  • Riverpod
  • State Management
  • Provider