Provider: Bir Modeli Paylaşma

Coddy'nin Flutter Journey'sinin Durum Yönetimi bölümünün bir parçası. Ders 9 / 27.

Durumu üst bileşene taşımak, bileşenler yakın olduğunda işe yarar. Bir değer uygulamanın her yerinde, iki ekranda, üst çubukta ve bir listenin derinliklerinde gerektiğinde, bu değeri aradaki her bileşenden geçirmeniz gerekir. Provider bu gerekliliği ortadan kaldırır. Bu bir pakettir: import 'package:provider/provider.dart'; ile içe aktardığınız bir kod kümesi.

Üç bölümü vardır. İlk olarak bir model: verileri tutan ve extends ChangeNotifier ifadesini kullanan bir sınıf. Yöntemleri verileri değiştirir ve ardından notifyListeners() çağrısını yapar:

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

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

İkinci olarak, bileşen ağacının üst kısımlarında bulunan bir ChangeNotifierProvider modeli bir kez oluşturur ve altındaki her bileşene verir:

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

Üçüncü olarak, altındaki herhangi bir bileşen bunu ister: göstermek için context.watch<CupCounter>(), bir yöntemi çağırmak için context.read<CupCounter>(). Başlık ve aşağıdaki düğme aynı sayacı alır ve ikisine de herhangi bir şey aktarılmaz.

Görev

Orta

Uygulamayı açın: bir hata gösteriyor, çünkü başlık bir CupCounter istiyor ve üstündeki hiçbir şey bunu sağlamıyor.

main içinde MyApp öğesini, bir CupCounter oluşturan ChangeNotifierProvider ile sarın.

Kendin dene

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