Pasar una función callback a un componente hijo

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

Un valor baja del padre al hijo. Un toque va en la otra dirección: el botón está en el hijo, pero la puntuación que cambia pertenece al padre.

El padre le pasa una función al hijo, y el hijo la llama. Una función sin parámetros que no devuelve nada tiene el tipo VoidCallback:

class AddButton extends StatelessWidget {
  const AddButton({super.key, required this.onAdd});

  final VoidCallback onAdd;

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(onPressed: onAdd, child: Text('Add point'));
  }
}

El padre escribe lo que hace el toque, con setState como de costumbre:

AddButton(
  onAdd: () {
    setState(() {
      score++;
    });
  },
)

Escribe onPressed: onAdd, no onAdd(). Lo primero le pasa la función al botón para que la use más tarde. Lo segundo la llama inmediatamente mientras se construye y pasa lo que devuelve.

Desafío

Fácil

El botón Add point está en el widget AddButton y todavía no hace nada.

Agrega a AddButton un campo final VoidCallback onAdd, establecido por su constructor.
Úsalo como onPressed del botón.
En la página, pasa una función que sume 1 a score dentro de setState.

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: [
            Text('Score: $score', style: const TextStyle(fontSize: 32)),
            const SizedBox(height: 16),
            const AddButton(),
          ],
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {},
      child: const Text('Add point'),
    );
  }
}