Passar o estado para um componente filho

Parte da seção Gerenciamento de estado do Journey de Flutter da Coddy. Lição 1 de 27.

Um aplicativo é composto por muitos widgets, e um pequeno geralmente precisa de um valor que pertence a um maior. Aqui, a pontuação fica no State da página, mas o placar que a exibe é um widget próprio.

Para passar um valor para baixo, dê ao filho um campo final e solicite esse valor no construtor:

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

  final int score;

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

O pai passa seu valor sempre que constrói o filho: ScoreBoard(score: score). Quando o pai chama setState, ele constrói novamente, e o placar recebe o novo número.

O filho nunca altera o valor. Ele exibe o que recebeu, e o pai continua sendo o único responsável pela pontuação.

Desafio

Fácil

O botão +1 conta pontos, mas o placar sempre mostra Score: 0.

Adicione à ScoreBoard um campo final int score, definido pelo seu construtor.
Faça com que o texto seja Score: seguido dessa pontuação.
Passe o score da página ao criar o placar.

Experimente você mesmo

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