State an ein Kind weitergeben

Teil des Abschnitts State Management der Flutter-Journey von Coddy. Lektion 1 von 27.

Eine App besteht aus vielen Widgets, und ein kleines Widget benötigt oft einen Wert, der einem größeren Widget gehört. Hier befindet sich der Punktestand im State der Seite, aber die Tafel, die ihn anzeigt, ist ein eigenes Widget.

Um einen Wert weiterzugeben, füge dem untergeordneten Widget ein final-Feld hinzu und fordere ihn im Konstruktor an:

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

  final int score;

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

Das übergeordnete Widget übergibt seinen Wert jedes Mal, wenn es das untergeordnete Widget erstellt: ScoreBoard(score: score). Wenn das übergeordnete Widget setState aufruft, wird es erneut erstellt, und die Tafel erhält die neue Zahl.

Das untergeordnete Widget ändert den Wert niemals. Es zeigt an, was ihm übergeben wurde, und das übergeordnete Widget bleibt der alleinige Besitzer des Punktestands.

Aufgabe

Einfach

Die Schaltfläche +1 zählt Punkte, aber die Anzeigetafel zeigt immer Score: 0 an.

Gib ScoreBoard ein Feld final int score, das von seinem Konstruktor festgelegt wird.
Setze seinen Text auf Score: , gefolgt von diesem Punktestand.
Übergib den score der Seite, wenn die Seite die Anzeigetafel erstellt.

Probier es selbst

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