Einen Callback an ein Kind weitergeben

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

Ein Wert wird vom übergeordneten Widget an das untergeordnete weitergegeben. Ein Tippen läuft in die andere Richtung: Die Schaltfläche befindet sich im untergeordneten Widget, aber der Punktestand, den sie ändert, gehört zum übergeordneten Widget.

Das übergeordnete Widget übergibt dem untergeordneten eine Funktion, und das untergeordnete Widget ruft sie auf. Eine Funktion ohne Parameter, die nichts zurückgibt, hat den Typ 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'));
  }
}

Das übergeordnete Widget legt fest, was beim Tippen geschieht, wie üblich mit setState:

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

Schreibe onPressed: onAdd, nicht onAdd(). Mit der ersten Schreibweise übergibst du die Funktion an die Schaltfläche, damit sie später aufgerufen wird. Mit der zweiten rufst du sie sofort beim Erstellen auf und übergibst den Rückgabewert.

Aufgabe

Einfach

Die Schaltfläche Add point befindet sich im Widget AddButton und tut noch nichts.

Füge AddButton ein Feld final VoidCallback onAdd hinzu, das von seinem Konstruktor festgelegt wird.
Verwende es als onPressed der Schaltfläche.
Übergib auf der Seite eine Funktion, die innerhalb von setState score um 1 erhöht.

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