Passare lo stato a un componente figlio

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

Un’app è composta da molti widget e spesso uno piccolo ha bisogno di un valore posseduto da uno più grande. In questo caso, il punteggio si trova nello State della pagina, ma il tabellone che lo mostra è un widget a sé stante.

Per passare un valore a un widget figlio, assegnagli un campo final e richiedilo nel costruttore:

class ScoreBoard extends StatelessWidget {
  const ScoreBoard({super.key, required this.score});

  final int score;

  @override
  Widget build(BuildContext context) {
    return Text('Score: $score');
  }
}

Il widget genitore passa il proprio valore ogni volta che crea il widget figlio: ScoreBoard(score: score). Quando il genitore chiama setState, ricrea il widget e il tabellone riceve il nuovo numero.

Il widget figlio non modifica mai il valore. Mostra quello che gli è stato dato e il genitore rimane l’unico proprietario del punteggio.

Sfida

Facile

Il pulsante +1 conta i punti, ma il tabellone mostra sempre Score: 0.

Aggiungi a ScoreBoard un campo final int score, impostato dal suo costruttore.
Fai in modo che il testo sia Score: seguito da quel punteggio.
Passa lo score della pagina quando la pagina crea il tabellone.

Provalo tu

import 'package:flutter/material.dart';

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 StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int score = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            const ScoreBoard(),
            const SizedBox(height: 16),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  score++;
                });
              },
              child: const Text('+1'),
            ),
          ],
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return const Text('Score: 0', style: TextStyle(fontSize: 32));
  }
}