Przekazywanie funkcji zwrotnej do komponentu potomnego

Część sekcji Zarządzanie stanem ścieżki Flutter w Coddy. Lekcja 2 z 27.

Wartość przepływa od rodzica do dziecka. Dotknięcie działa w drugą stronę: przycisk znajduje się w dziecku, ale wynik, który zmienia, należy do rodzica.

Rodzic przekazuje dziecku funkcję, a dziecko ją wywołuje. Funkcja bez parametrów, która niczego nie zwraca, ma 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'));
  }
}

Rodzic określa, co robi dotknięcie, używając jak zwykle setState:

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

Napisz onPressed: onAdd, a nie onAdd(). W pierwszym przypadku przekazujesz funkcję przyciskowi, aby wywołał ją później. W drugim wywołujesz ją od razu podczas budowania i przekazujesz to, co zwraca.

Wyzwanie

Łatwy

Przycisk Add point znajduje się w widżecie AddButton i na razie nic nie robi.

Dodaj do AddButton pole final VoidCallback onAdd, ustawiane przez jego konstruktor.
Użyj go jako onPressed przycisku.
Na stronie przekaż funkcję, która zwiększa score o 1 wewnątrz setState.

Spróbuj swoich sił

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