Birden Fazla Model: MultiProvider

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

Her modeli tek bir konu etrafında tut: puan bir sınıfta, canlar başka bir sınıfta olsun. Küçük modelleri okumak kolaydır ve bir widget yalnızca ihtiyaç duyduğu şeyi izler. Birden fazla modeli olan bir uygulamanın birden fazla sağlayıcıya ihtiyacı vardır.

Sağlayıcıları iç içe yerleştirebilirsin; bir sağlayıcı diğerinin çocuğu olur, ancak her modelle kod biraz daha sağa kayar. MultiProvider bunun yerine düz bir liste alır:

runApp(
  MultiProvider(
    providers: [
      ChangeNotifierProvider(create: (context) => Score()),
      ChangeNotifierProvider(create: (context) => Lives()),
    ],
    child: const MyApp(),
  ),
);

Listedeki sağlayıcıların kendilerine ait bir child öğesi yoktur: MultiProvider bunları senin için üst üste dizer ve child öğesini hepsinin altına yerleştirir. Altındaki her widget, modellerden herhangi birini türüne göre izleyebilir veya okuyabilir: context.watch<Lives>().

Görev

Kolay

Oyun sayfası Score ve Lives olmak üzere iki modeli izliyor, ancak main yalnızca skoru sağladığı için uygulama bir hata gösteriyor.

main içindeki sağlayıcıyı her iki modeli de sağlayan bir MultiProvider ile değiştir.

Kendin dene

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

class Score extends ChangeNotifier {
  int _points = 0;

  int get points => _points;

  void hit() {
    _points += 10;
    notifyListeners();
  }
}

class Lives extends ChangeNotifier {
  int _left = 3;

  int get left => _left;

  void miss() {
    if (_left > 0) {
      _left--;
      notifyListeners();
    }
  }
}

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: GamePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    final points = context.watch<Score>().points;
    final lives = context.watch<Lives>().left;
    return Scaffold(
      appBar: AppBar(title: Text('Lives: $lives')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('Points: $points', style: const TextStyle(fontSize: 40)),
            const SizedBox(height: 16),
            Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                ElevatedButton(
                  onPressed: () => context.read<Score>().hit(),
                  child: const Text('Hit'),
                ),
                const SizedBox(width: 16),
                ElevatedButton(
                  onPressed: () => context.read<Lives>().miss(),
                  child: const Text('Miss'),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}