Riverpod: Zustand beobachten und verändern

Wenn mehrere Widgets denselben Zustand brauchen, soll nicht jedes Widget eine eigene Kopie pflegen. Riverpod stellt Werte und Dienste über Provider bereit. Ein Notifier besitzt hier den veränderlichen Zustand. ref.watch beobachtet ihn, während ref.read eine Aktion auslöst. So wird die Richtung sichtbar: Die Oberfläche liest einen Zustand und ruft eine benannte Aktion auf.

Beispieldateien

main.dart

01Riverpod hinzufügen

Führe im Lernprojekt flutter pub add flutter_riverpod:3.3.1 aus. ProviderScope umschließt die Anwendung. ConsumerWidget gibt seiner build-Methode ein WidgetRef, über das Provider gelesen werden.

main.dart · dartDatei öffnen

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

final counterProvider = NotifierProvider<EntryCounter, int>(EntryCounter.new);

class EntryCounter extends Notifier<int> {
  @override
  int build() => 0;
  void add() => state++;
}

void main() =>
    runApp(const ProviderScope(child: MaterialApp(home: CounterScreen())));

class CounterScreen extends ConsumerWidget {
  const CounterScreen({super.key});
  @override
  Widget build(BuildContext context, WidgetRef ref) => Scaffold(
    body: Center(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Text('Entries: ${ref.watch(counterProvider)}'),
          FilledButton(
            onPressed: () => ref.read(counterProvider.notifier).add(),
            child: const Text('Add entry'),
          ),
        ],
      ),
    ),
  );
}

Starten / prüfen

flutter analyze
flutter run -d chrome

02Einen Zustandsbesitzer definieren

EntryCounter extends Notifier<int>. build liefert den Anfangswert. add ist die benannte Aktion. Der Provider erzeugt diesen Notifier. Die Oberfläche kennt dadurch keine eigene Speicherregel.

03watch und read unterscheiden

ref.watch(counterProvider) sorgt bei Änderungen für einen neuen build. ref.read(counterProvider.notifier).add() ruft die Aktion auf, ohne in diesem Callback eine neue Beobachtung einzurichten. Fahrzeugakte verdrahtet auf dieselbe Weise Repositories und Services.

04Die Besitzgrenze prüfen

Füge einen zweiten Text mit ref.watch desselben Providers hinzu. Beide zeigen denselben Wert. Zwei verschiedene Provider würden dagegen getrennte Zustände besitzen. Ein Hot Restart setzt unseren Speicherzustand zurück.

Erwartetes Ergebnis

Jeder Klick erhöht denselben beobachteten Zähler.

Deine Übung

Ergänze reset im Notifier und einen Button, der diese Aktion auslöst.

Lösung mit Erklärung anzeigen

void reset() => state = 0 bündelt die Änderung im Notifier. Der Button verwendet ref.read(counterProvider.notifier).reset(). Die Oberfläche beobachtet weiter denselben Provider.

Projektbezug und Quellen

Das Beispiel ist zum Lernen vereinfacht. Die verlinkte Codeversion zeigt die Anwendung im Projekt und die dortigen Prüfungen.

Fahrzeugakte