Provider: Beobachten oder lesen

Teil des Abschnitts State Management der Flutter-Journey von Coddy. Lektion 11 von 27.

Es gibt zwei Möglichkeiten, ein Modell von Provider abzurufen, und sie erfüllen unterschiedliche Aufgaben.

context.watch<StepCounter>() ruft das Modell ab und abonniert es: Wenn das Modell notifyListeners() aufruft, wird dieses Widget erneut aufgebaut. Verwende es in build für alles, was auf dem Bildschirm angezeigt wird.

context.read<StepCounter>() ruft das Modell einmalig ab, ohne es zu abonnieren. Verwende es in Rückrufen wie onPressed, wenn du eine Methode aufrufen möchtest, ohne etwas anzuzeigen:

Widget build(BuildContext context) {
  final steps = context.watch<StepCounter>().steps;   // zeigt an
  return ElevatedButton(
    onPressed: () => context.read<StepCounter>().walk(),   // führt eine Aktion aus
    child: Text('$steps steps'),
  );
}

Wenn du sie verwechselst, merkst du es. read in build zeigt für immer den ersten Wert an. watch innerhalb von onPressed ist ein Fehler, denn ein Tippen ist kein Build und es gibt nichts zu abonnieren.

Aufgabe

Einfach

Walk fügt dem Modell 1000 Schritte hinzu, aber auf dem Bildschirm bleibt 0 steps stehen.

Sorge dafür, dass die Schrittanzeige dem Modell folgt, damit bei jedem Tippen die neue Zahl angezeigt wird.
Lass den Aufruf der Schaltfläche unverändert.

Probier es selbst

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'),
            ),
          ],
        ),
      ),
    );
  }
}