Provider: Consumer

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

Qui il provider viene creato all'interno del build di MyApp, e lo stesso build richiede la lampada subito sotto. L'app mostra un errore: context appartiene a MyApp, che si trova sopra il provider, e un widget può trovare solo i provider che si trovano sopra di esso.

Un Consumer risolve il problema. È un widget, quindi si trova sotto il provider, e il suo builder riceve un nuovo context e il modello stesso:

Consumer<Lamp>(
  builder: (context, lamp, child) {
    return Text(lamp.isOn ? 'On' : 'Off');
  },
)

Il builder viene eseguito di nuovo ogni volta che la lampada chiama notifyListeners(), proprio come un widget che la osserva. Al suo interno, puoi chiamare i metodi del modello direttamente su lamp: onPressed: () => lamp.toggle().

Anche un Consumer ricostruisce solo ciò che racchiude, quindi racchiudere la parte che cambia mantiene invariato il resto della schermata. Nella maggior parte delle app userai context.watch in un widget dedicato e ricorrerai a Consumer quando ti trovi nello stesso build del provider.

Sfida

Medio

L’app si apre mostrando un errore. Inserisci i componenti della lampada in un Consumer:

Racchiudi la Column in un Consumer<Lamp> e restituisci la Column dal suo builder.
Al suo interno, usa lamp del builder per l’icona, il testo e il pulsante.

Provalo tu

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

class Lamp extends ChangeNotifier {
  bool _isOn = false;

  bool get isOn => _isOn;

  void toggle() {
    _isOn = !_isOn;
    notifyListeners();
  }
}

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => Lamp(),
      child: MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Scaffold(
          appBar: AppBar(title: const Text('Lamp')),
          body: Center(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Icon(
                  context.watch<Lamp>().isOn ? Icons.lightbulb : Icons.lightbulb_outline,
                  size: 96,
                  color: context.watch<Lamp>().isOn ? Colors.amber : Colors.grey,
                ),
                Text(context.watch<Lamp>().isOn ? 'The lamp is on' : 'The lamp is off'),
                const SizedBox(height: 16),
                ElevatedButton(
                  onPressed: () => context.read<Lamp>().toggle(),
                  child: const Text('Switch'),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}