Riverpod : ProviderScope

Fait partie de la section Gestion d’état du Journey Flutter de Coddy. Leçon 16 sur 27.

Riverpod est un autre package de gestion d’état partagé, écrit par la même personne que Provider, qui a tiré quelques leçons de son expérience. Son principal changement : un fournisseur n’est pas un widget dans l’arborescence. C’est une variable final en haut du fichier, en dehors de toute classe :

import 'package:flutter_riverpod/flutter_riverpod.dart';

final quoteProvider = Provider((ref) => 'Small steps, every day.');

La fonction fournit sa valeur au fournisseur. Riverpod l’appelle la première fois qu’un widget en fait la demande, puis conserve le résultat.

Les valeurs doivent être conservées quelque part, et c’est le rôle de ProviderScope. Il est placé une seule fois autour de toute l’application, dans main :

void main() {
  runApp(const ProviderScope(child: MyApp()));
}

Un widget lit un fournisseur au moyen d’un ref. Un ConsumerWidget est un StatelessWidget dont la méthode build reçoit un ref : ref.watch(quoteProvider). Sans ProviderScope au-dessus de lui, cette ligne n’a nulle part où chercher, et l’application s’arrête avec No ProviderScope found.

Défi

Facile

L’application s’arrête avec No ProviderScope found.

Enveloppe MyApp dans un ProviderScope dans main.
Remplace la citation par Small steps, every day.

Essayez vous-même

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

final appNameProvider = Provider((ref) => 'Daily Quote');
final quoteProvider = Provider((ref) => 'Write your quote here.');

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

class HomePage extends ConsumerWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final appName = ref.watch(appNameProvider);
    final quote = ref.watch(quoteProvider);
    return Scaffold(
      appBar: AppBar(title: Text(appName)),
      body: Center(
        child: Text(quote, style: const TextStyle(fontSize: 24)),
      ),
    );
  }
}