Provider: Udostępnianie modelu

Część sekcji Zarządzanie stanem ścieżki Flutter w Coddy. Lekcja 9 z 27.

Przenoszenie stanu w górę działa, gdy widżety znajdują się blisko siebie. Gdy wartość jest potrzebna w całej aplikacji — na dwóch ekranach, na górnym pasku, głęboko wewnątrz listy — trzeba byłoby przekazywać ją przez każdy widżet po drodze. Provider to omija. To pakiet: zestaw kodu, który importujesz za pomocą import 'package:provider/provider.dart';.

Składa się z trzech części. Po pierwsze, model: klasa przechowująca dane i extends ChangeNotifier. Jej metody zmieniają dane, a następnie wywołują notifyListeners():

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

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

Po drugie, umieszczony wysoko w drzewie ChangeNotifierProvider tworzy model raz i udostępnia go wszystkim znajdującym się poniżej widżetom:

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

Po trzecie, dowolny widżet znajdujący się niżej może o niego poprosić: context.watch<CupCounter>(), aby go wyświetlić, lub context.read<CupCounter>(), aby wywołać metodę. Tytuł i przycisk poniżej korzystają z tego samego licznika, a żadnemu z nich nie przekazuje się żadnej wartości.

Wyzwanie

Średni

Otwórz aplikację: wyświetla błąd, ponieważ tytuł wymaga CupCounter, a nic powyżej go nie udostępnia.

W main opakuj MyApp w ChangeNotifierProvider, który tworzy CupCounter.

Spróbuj swoich sił

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