Provider: condividere un modello

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

Sollevare lo stato funziona quando i widget sono vicini. Quando un valore serve in tutta l’app, su due schermate, nella barra superiore o in profondità dentro un elenco, dovresti passarlo attraverso ogni widget intermedio. Provider evita questo passaggio. È un pacchetto: un insieme di codice che importi con import 'package:provider/provider.dart';.

È composto da tre parti. Prima, un modello: una classe che contiene i dati e extends ChangeNotifier. I suoi metodi modificano i dati e poi chiamano notifyListeners():

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

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

Secondo, un ChangeNotifierProvider collocato in alto nell’albero crea il modello una volta e lo passa a ogni widget sottostante:

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

Terzo, ogni widget sottostante lo richiede: context.watch<CupCounter>() per mostrarlo, context.read<CupCounter>() per chiamare un metodo. Il titolo e il pulsante qui sotto ricevono lo stesso contatore e non viene passato nulla a nessuno dei due.

Sfida

Medio

Apri l'app: mostra un errore, perché il titolo richiede un CupCounter e nessuno degli elementi precedenti gliene fornisce uno.

In main, racchiudi MyApp in un ChangeNotifierProvider che crea un CupCounter.

Provalo tu

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