La flèche de retour

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

Un écran que tu empiles doit permettre de revenir en arrière. Un AppBar t’offre cette possibilité gratuitement : lorsqu’un écran se trouve en dessous dans la pile, la barre de l’application affiche une flèche de retour à son début.

Scaffold(
  appBar: AppBar(title: const Text('Details')),
  body: ...,
)

Lorsque tu appuies sur la flèche, l’écran situé au sommet de la pile est retiré, et l’écran en dessous réapparaît tel qu’il était. Le geste de retour du téléphone et le bouton Retour d’Android font la même chose.

Le premier écran de l’application n’a rien en dessous de lui, donc sa barre d’application n’affiche aucune flèche.

Défi

Facile

Ouvre les détails sur le téléphone : il n’y a aucun moyen de revenir en arrière. Ajoute une AppBar intitulée Details à DetailScreen, pour qu’elle affiche une flèche de retour.

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Home')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => const DetailScreen()),
            );
          },
          child: const Text('Open details'),
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: const Center(
        child: Text('Here are the details'),
      ),
    );
  }
}