Passare una callback a un componente figlio

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

Un valore scende dal genitore al figlio. Un tocco va nella direzione opposta: il pulsante si trova nel figlio, ma il punteggio che modifica appartiene al genitore.

Il genitore passa una funzione al figlio, e il figlio la chiama. Una funzione senza parametri che non restituisce nulla ha il 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'));
  }
}

Il genitore scrive cosa fa il tocco, usando setState come al solito:

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

Scrivi onPressed: onAdd, non onAdd(). Nel primo caso passi la funzione al pulsante, che la userà in seguito. Nel secondo la chiami subito durante la creazione e passi ciò che restituisce.

Sfida

Facile

Il pulsante Add point si trova nel widget AddButton e per ora non fa nulla.

Aggiungi a AddButton un campo final VoidCallback onAdd, impostato dal suo costruttore.
Usalo come onPressed del pulsante.
Nella pagina, passa una funzione che aggiunge 1 a score all'interno di setState.

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: [
            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'),
    );
  }
}