ConsumerWidget et ref.watch

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

N’importe quel widget peut lire un fournisseur dès qu’il peut obtenir un ref. Pour lui en fournir un, modifie deux choses :

extends StatelessWidget devient extends ConsumerWidget.
build reçoit un deuxième paramètre, WidgetRef ref.

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

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final city = ref.watch(cityProvider);
    return Text(city);
  }
}

ref.watch(cityProvider) te donne la valeur du fournisseur, ici le texte Lisbon, et reconstruit le widget chaque fois que cette valeur change. Sans ref.watch, cityProvider désigne uniquement le fournisseur lui-même, pas sa valeur.

Chaque widget qui a besoin d’une valeur la demande ainsi, où qu’il se trouve. Rien n’est transmis par les constructeurs, et rien n’a besoin de context pour la trouver.

Défi

Facile

CityName et Temperature affichent des espaces réservés. Faites-leur lire les fournisseurs en haut du fichier :

Transformez-les tous les deux en ConsumerWidget.
CityName affiche la valeur de cityProvider.
Temperature affiche la valeur de temperatureProvider suivie de °C, à la même taille.

Essayez vous-même

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

final cityProvider = Provider((ref) => 'Lisbon');
final temperatureProvider = Provider((ref) => 21);

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: const CityName()),
        body: const Center(child: Temperature()),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return const Text('City');
  }
}

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

  @override
  Widget build(BuildContext context) {
    return const Text('0°C', style: TextStyle(fontSize: 64));
  }
}