Ein Ergebnis zurückerhalten

Teil des Abschnitts Listen und Bildschirme der Flutter-Journey von Coddy. Lektion 22 von 33.

Manche Bildschirme dienen dazu, eine Frage zu stellen: Wähle eine Farbe, wähle ein Datum. Die Antwort muss zu dem Bildschirm zurückgelangen, der gefragt hat. Navigator.pop kann sie mitgeben:

Navigator.pop(context, 'Green');

Auf der anderen Seite gibt Navigator.push ein Future zurück: einen Wert, der später eintrifft, wenn der aufgerufene Bildschirm geschlossen wird. await wartet darauf, und die wartende Funktion wird mit async gekennzeichnet:

onPressed: () async {
  final String? color = await Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => const ColorScreen()),
  );
  if (color != null) {
    setState(() {
      chosen = color;
    });
  }
},

Das Ergebnis ist ein String?: Wenn jemand über den Zurück-Pfeil zurückgeht, wird nichts gesendet und color ist null. Das if lässt dann die alte Auswahl bestehen. In einem späteren Abschnitt wird die ganze Geschichte von Future und await erzählt.

Aufgabe

Mittel

Durch die Auswahl einer Farbe wird der Farbbildschirm geschlossen, aber der Startbildschirm erfährt nie davon. Lass die Auswahl zurückgeben:

Rufe auf dem Farbbildschirm mit der Farbe auf: Navigator.pop(context, color)
Warte auf dem Startbildschirm mit await auf den Push und zeige, wenn eine Farbe zurückgegeben wurde, Your color: Green (mit der ausgewählten Farbe) an
Wenn du über den Zurück-Pfeil gehst, bleibt der alte Text erhalten

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: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  String chosen = 'none';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Paint')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('Your color: $chosen', style: const TextStyle(fontSize: 24)),
            const SizedBox(height: 16),
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => const ColorScreen()),
                );
              },
              child: const Text('Choose a color'),
            ),
          ],
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Pick a color')),
      body: ListView(
        children: [
          for (String color in ['Red', 'Green', 'Blue'])
            ListTile(
              title: Text(color),
              onTap: () {
                Navigator.pop(context);
              },
            ),
        ],
      ),
    );
  }
}