Pasar el estado a un componente hijo

Parte de la sección Gestión del estado del Journey de Flutter de Coddy. Lección 1 de 27.

Una aplicación está formada por muchos widgets, y una pequeña suele necesitar un valor que posee uno más grande. Aquí, la puntuación está en el State de la página, pero el tablero que la muestra es un widget independiente.

Para pasar un valor, dale al hijo un campo final y pídeselo en el constructor:

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

  final int score;

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

El padre pasa su valor cada vez que construye al hijo: ScoreBoard(score: score). Cuando el padre llama a setState, vuelve a construir, y el tablero recibe el nuevo número.

El hijo nunca cambia el valor. Muestra lo que recibió, y el padre sigue siendo el único propietario de la puntuación.

Desafío

Fácil

El botón +1 cuenta puntos, pero el tablero siempre muestra Score: 0.

Dale a ScoreBoard un campo final int score, establecido por su constructor.
Haz que su texto sea Score: seguido de esa puntuación.
Pasa el score de la página cuando esta construya el tablero.

Pruébalo tú mismo

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