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