Transmettre l’état à un composant enfant

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

Une application est composée de nombreux widgets, et un petit widget a souvent besoin d’une valeur détenue par un widget plus grand. Ici, le score se trouve dans le State de la page, mais le tableau qui l’affiche est un widget à part entière.

Pour transmettre une valeur à un widget enfant, ajoute-lui un champ final et demande cette valeur dans le constructeur :

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

  final int score;

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

Le widget parent transmet sa valeur chaque fois qu’il crée le widget enfant : ScoreBoard(score: score). Lorsque le parent appelle setState, il est recréé, et le tableau reçoit le nouveau nombre.

Le widget enfant ne modifie jamais la valeur. Il affiche celle qu’on lui a donnée, et le parent reste l’unique propriétaire du score.

Défi

Facile

Le bouton +1 compte les points, mais le tableau affiche toujours Score: 0.

Ajoute à ScoreBoard un champ final int score, défini par son constructeur.
Fais en sorte que son texte soit Score: suivi de ce score.
Transmets le score de la page lorsqu’elle crée le tableau.

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