Provider: Ein Modell teilen

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

Das Hochheben des Zustands funktioniert, solange die Widgets nahe beieinanderliegen. Wenn ein Wert überall in der App benötigt wird, auf zwei Bildschirmen, in der oberen Leiste und tief in einer Liste, müsstest du ihn durch jedes dazwischenliegende Widget weiterreichen. Provider umgeht das. Es ist ein Paket: eine Sammlung von Code, die du mit import 'package:provider/provider.dart'; importierst.

Es besteht aus drei Teilen. Erstens ein Modell: eine Klasse, die die Daten enthält und extends ChangeNotifier. Ihre Methoden ändern die Daten und rufen dann notifyListeners() auf:

class CupCounter extends ChangeNotifier {
  int _cups = 0;
  int get cups => _cups;

  void addCup() {
    _cups++;
    notifyListeners();
  }
}

Zweitens erstellt ein ChangeNotifierProvider weit oben im Widget-Baum das Modell einmal und stellt es jedem darunterliegenden Widget zur Verfügung:

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => CupCounter(),
      child: const MyApp(),
    ),
  );
}

Drittens fragt ein beliebiges darunterliegendes Widget danach: context.watch<CupCounter>(), um es anzuzeigen, context.read<CupCounter>(), um eine Methode aufzurufen. Der Titel und die Schaltfläche darunter erhalten denselben Zähler, und keinem von beiden wird etwas übergeben.

Aufgabe

Mittel

Öffne die App: Es wird ein Fehler angezeigt, weil der Titel nach einem CupCounter fragt und nichts darüber einen bereitstellt.

Umschließe in main MyApp mit einem ChangeNotifierProvider, der einen CupCounter erstellt.

Probier es selbst

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

class CupCounter extends ChangeNotifier {
  int _cups = 0;

  int get cups => _cups;

  void addCup() {
    _cups++;
    notifyListeners();
  }
}

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 StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const CupsTitle()),
      body: const Center(child: AddCupButton()),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    final counter = context.watch<CupCounter>();
    return Text('Cups: ${counter.cups}');
  }
}

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

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        context.read<CupCounter>().addCup();
      },
      child: const Text('Another cup'),
    );
  }
}