Più modelli: MultiProvider

Fa parte della sezione Gestione dello stato del percorso Flutter di Coddy. Lezione 15 di 27.

Mantieni ogni modello focalizzato su un solo aspetto: il punteggio in una classe, le vite in un’altra. I modelli piccoli sono facili da leggere e un widget osserva solo ciò di cui ha bisogno. Un’app con diversi modelli ha bisogno di diversi provider.

Potresti annidarli, mettendo un provider come figlio del successivo, ma il codice si sposta sempre più a destra a ogni modello. MultiProvider accetta invece un elenco semplice:

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

I provider nell’elenco non hanno un proprio child: MultiProvider li dispone in sequenza per te e colloca child sotto tutti loro. Ogni widget sottostante può osservare o leggere qualsiasi modello, ciascuno in base al proprio tipo: context.watch<Lives>().

Sfida

Facile

La pagina del gioco osserva due modelli, Score e Lives, ma main fornisce solo il punteggio, quindi l'app mostra un errore.

Sostituisci il provider in main con un MultiProvider che fornisca entrambi i modelli.

Provalo tu

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