Transmettre une fonction de rappel à un composant enfant

Fait partie de la section Gestion d’état du Journey Flutter de Coddy. Leçon 2 sur 27.

Une valeur descend du parent vers l’enfant. Un appui suit le chemin inverse : le bouton se trouve dans l’enfant, mais le score qu’il modifie appartient au parent.

Le parent transmet une fonction à l’enfant, et l’enfant l’appelle. Une fonction sans paramètre et qui ne renvoie rien a le type 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'));
  }
}

Le parent définit ce que fait l’appui, avec setState comme d’habitude :

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

Écris onPressed: onAdd, et non onAdd(). La première écriture transmet la fonction au bouton pour qu’il l’exécute plus tard. La seconde l’appelle immédiatement pendant la construction et transmet la valeur qu’elle renvoie.

Défi

Facile

Le bouton Add point se trouve dans le widget AddButton, et il ne fait encore rien.

Ajoute à AddButton un champ final VoidCallback onAdd, défini par son constructeur.
Utilise-le comme onPressed du bouton.
Dans la page, transmets une fonction qui ajoute 1 à score dans setState.

Essayez vous-même

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