Provider : surveiller ou lire

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

Il existe deux façons d’obtenir un modèle depuis Provider, et elles n’ont pas le même rôle.

context.watch<StepCounter>() récupère le modèle et s’y abonne : lorsque le modèle appelle notifyListeners(), ce widget se reconstruit. Utilise-le dans build, pour tout ce que l’écran affiche.

context.read<StepCounter>() récupère le modèle une fois, sans abonnement. Utilise-le dans les rappels, comme onPressed, lorsque tu veux appeler une méthode sans rien afficher :

Widget build(BuildContext context) {
  final steps = context.watch<StepCounter>().steps;   // affiche
  return ElevatedButton(
    onPressed: () => context.read<StepCounter>().walk(),   // agit
    child: Text('$steps steps'),
  );
}

Confonds-les et tu verras le résultat. read dans build affiche indéfiniment la première valeur. watch dans onPressed provoque une erreur, car un appui n’est pas une construction et il n’y a rien à quoi s’abonner.

Défi

Facile

Walk ajoute 1000 pas au modèle, mais l’écran reste à 0 steps.

Fais en sorte que la ligne des pas suive le modèle, afin que chaque appui affiche le nouveau nombre.
Garde l’appel du bouton tel quel.

Essayez vous-même

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

class StepCounter extends ChangeNotifier {
  int _steps = 0;

  int get steps => _steps;

  void walk() {
    _steps += 1000;
    notifyListeners();
  }
}

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => StepCounter(),
      child: 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 StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    final steps = context.read<StepCounter>().steps;
    return Scaffold(
      appBar: AppBar(title: const Text('Steps')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('$steps steps', style: const TextStyle(fontSize: 40)),
            const SizedBox(height: 16),
            ElevatedButton(
              onPressed: () {
                context.read<StepCounter>().walk();
              },
              child: const Text('Walk'),
            ),
          ],
        ),
      ),
    );
  }
}