Callbacks, die einen Wert übergeben

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

Ein Callback kann einen Wert zurück nach oben übergeben. Der Größenauswähler unten hat drei Schaltflächen, und die Seite muss wissen, welche davon angetippt wurde.

Gib dem Callback einen Parameter. Der Typ void Function(String) ist eine Funktion, die einen String entgegennimmt und nichts zurückgibt:

class SizePicker extends StatelessWidget {
  const SizePicker({super.key, required this.onPick});

  final void Function(String) onPick;

  @override
  Widget build(BuildContext context) {
    return OutlinedButton(
      onPressed: () => onPick('S'),
      child: Text('S'),
    );
  }
}

Jede Schaltfläche umschließt den Aufruf in einer kleinen Funktion, () => onPick('S'), damit sie beim Antippen und nicht während des Aufbaus ausgeführt wird. Das übergeordnete Widget erhält den Wert als Parameter und speichert ihn:

SizePicker(
  onPick: (picked) {
    setState(() {
      size = picked;
    });
  },
)

Flutter hat einen kürzeren Namen für denselben Typ: ValueChanged<String>. Viele integrierte Widgets verwenden ihn, zum Beispiel das onChanged eines TextField.

Aufgabe

Mittel

Sorge dafür, dass die Größenauswahl funktioniert:

Gib SizePicker ein Feld final void Function(String) onPick, das vom Konstruktor festgelegt wird.
Lass jede Schaltfläche onPick mit ihrem eigenen Buchstaben aufrufen.
Zeige auf der Seite die ausgewählte Größe an: Size: S, Size: M oder Size: L.

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> {
  String size = 'M';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('T-shirt')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('Size: $size', style: const TextStyle(fontSize: 32)),
            const SizedBox(height: 16),
            const SizePicker(),
          ],
        ),
      ),
    );
  }
}

class SizePicker extends StatelessWidget {
  const SizePicker({super.key});

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        OutlinedButton(onPressed: () {}, child: const Text('S')),
        const SizedBox(width: 8),
        OutlinedButton(onPressed: () {}, child: const Text('M')),
        const SizedBox(width: 8),
        OutlinedButton(onPressed: () {}, child: const Text('L')),
      ],
    );
  }
}