Aller au contenu principal

Débuter

Avant d'expliquer le fonctionnement de Riverpod, commençons par les bases: Installons Riverpod, puis écrivons un "Hello world".

Quelle librairie installer

Avant toute chose, il faut noter que Riverpod est séparé en plusieurs libraries, pour des usages différents.
La variante de Riverpod à installer dépendra donc de votre application.

Pour choisir, vous pouvez vous référer au tableau suivant:

Type d'applicationLibrarie à installerdescriptif
Flutter + flutter_hookshooks_riverpodPermet d'utiliser flutter_hooks et Riverpod en même temps.
Flutter uniquementflutter_riverpodUne librarie pour utiliser Riverpod avec Flutter.
Dart uniquement (Sans Flutter)riverpodLe core de Riverpod sans dépendence à Flutter.

Installation

Une fois la librarie choisie, vous pouvez modifier votre pubspec.yaml pour y include:

pubspec.yaml
environment:
sdk: ">=2.12.0 <3.0.0"
flutter: ">=2.0.0"

dependencies:
flutter:
sdk: flutter
flutter_hooks: ^0.18.0
hooks_riverpod: ^1.0.0-dev.11

Then run flutter pub get.

Voilà. Vous pouvez maintenant utiliser Riverpod dans votre application!

Exemple d'utilisation: Hello world

Maintenant que nous avons installé Riverpod, commençons à l'utiliser.

Les exemples de code suivant montrent comment utiliser notre nouvelle dépendence pour consuite un "Hello world":

lib/main.dart
import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:flutter_hooks/flutter_hooks.dart';

// Nous créons un "provider", qui va stocker une valeur (ici "Hello world").
// En utilisant un provider, cela permet de mocker/changer la valeur exposée.
final helloWorldProvider = Provider((_) => 'Hello world');

void main() {
runApp(
// Pour que les widgets soient capables de lire des providers, nous
// devons encapsuler l'entièreté de notre application dans le
// widget "ProviderScope".
// C'est dans celui-ci que sera stocké l'état de nos providers.
ProviderScope(
child: MyApp(),
),
);
}

// Note: MyApp est un HookConsumerWidget, exposé par hooks_riverpod.
class MyApp extends HookConsumerWidget {
@override
Widget build(BuildContext context, WidgetRef ref) {
// Pour lire note provider, nous pouvons utiliser l'objet "ref"
// Cet objet est fourni par HookConsumerWidget.
final String value = ref.watch(helloWorldProvider);

return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Example')),
body: Center(
child: Text(value),
),
),
);
}
}

Nous pouvons ensuite executer l'application via flutter run.
Cela va afficher "Hello world" sur votre téléphone.

Aller plus loin: Installer des raccourcis de code

Si vous utilisez Flutter et Vscode , considérez l'installation des Flutter Riverpod Snippets

Si vous utilisez Flutter et Android Studio/IntelliJ, considérez l'installation des Flutter Riverpod Snippets

img