Récupérer un résultat

Fait partie de la section Listes et écrans du Journey Flutter de Coddy. Leçon 22 sur 33.

Certains écrans servent à poser une question : choisir une couleur, choisir une date. La réponse doit revenir à l’écran qui l’a posée. Navigator.pop peut la transmettre :

Navigator.pop(context, 'Green');

De l’autre côté, Navigator.push renvoie un Future : une valeur qui arrive plus tard, lorsque l’écran ajouté est retiré. await l’attend, et la fonction qui attend est marquée async :

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

Le résultat est un String? : lorsque quelqu’un quitte l’écran avec la flèche de retour, rien n’est envoyé et color vaut null. Le if conserve alors l’ancien choix. Une section ultérieure raconte toute l’histoire de Future et de await.

Défi

Moyen

Choisir une couleur ferme l’écran des couleurs, mais l’écran d’accueil n’en est jamais informé. Faites revenir le choix :

sur l’écran des couleurs, faites un pop avec la couleur : Navigator.pop(context, color)
sur l’écran d’accueil, faites un await du push et, lorsqu’une couleur est renvoyée, affichez Your color: Green (avec la couleur choisie)
quitter avec la flèche de retour conserve l’ancien texte

Essayez vous-même

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