Envoyer des données à un écran

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

Un écran de détail affiche un élément, celui sur lequel tu as appuyé. L’écran est un widget : il reçoit donc ses données comme n’importe quel widget, par son constructeur.

class PlanetScreen extends StatelessWidget {
  const PlanetScreen({super.key, required this.planet});

  final Planet planet;
  ...
}

L’écran conserve la planète dans un champ final et la lit dans build : Text(planet.name). super.key est la clé que chaque widget peut recevoir ; garde-la en premier.

À l’endroit où tu ouvres l’écran, transmets la planète de la ligne sur laquelle tu as appuyé :

onTap: () {
  Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => PlanetScreen(planet: planet)),
  );
},

Une seule classe d’écran affiche maintenant n’importe quelle planète. La liste détermine laquelle.

Défi

Moyen

Appuie sur n’importe quelle planète : l’écran affiche toujours Mercury. Fais en sorte que PlanetScreen affiche la planète sur laquelle tu as appuyé :

ajoute-lui un champ final Planet planet; et un paramètre required this.planet
affiche planet.name dans sa barre d’application et Mars has 2 moons (avec le nom de la planète et son nombre de lunes) au centre
transmets la planet sélectionnée lorsque tu la fais apparaître

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 StatelessWidget {
  const HomeScreen({super.key});

  final List<Planet> planets = const [
    Planet(name: 'Mercury', moons: 0),
    Planet(name: 'Venus', moons: 0),
    Planet(name: 'Earth', moons: 1),
    Planet(name: 'Mars', moons: 2),
    Planet(name: 'Jupiter', moons: 95),
    Planet(name: 'Saturn', moons: 146),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Planets')),
      body: ListView(
        children: [
          for (Planet planet in planets)
            ListTile(
              title: Text(planet.name),
              onTap: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => const PlanetScreen()),
                );
              },
            ),
        ],
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Mercury')),
      body: const Center(
        child: Text('Mercury has 0 moons'),
      ),
    );
  }
}

class Planet {
  final String name;
  final int moons;

  const Planet({required this.name, required this.moons});
}