Menu
CoddyTech

Revenir avec un bouton

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

La flèche de retour n’est pas le seul moyen de revenir en arrière. Un bouton Enregistrer ou Terminé doit également fermer son écran lorsqu’on appuie dessus. Navigator.pop retire l’écran du haut de la pile, comme le fait la flèche de retour :

ElevatedButton(
  onPressed: () {
    Navigator.pop(context);
  },
  child: const Text('Save'),
)

Push et pop vont de pair : push ajoute un écran, pop le retire. Réafficher l’écran d’accueil ne permettrait pas de revenir en arrière. Cela ajouterait un deuxième écran d’accueil au sommet de la pile, avec une flèche de retour menant aux paramètres.

challenge icon

Défi

Facile

Le bouton Save de l’écran des paramètres ne fait rien. Faites en sorte qu’il ferme l’écran des paramètres et revienne à l’écran d’accueil avec Navigator.pop.

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 SettingsScreen()),
            );
          },
          child: const Text('Open settings'),
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Settings')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {},
          child: const Text('Save'),
        ),
      ),
    );
  }
}
quiz iconTestez-vous

Cette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.

Toutes les leçons de Listes et écrans

Entraînez-vous par vous-même : Compilateur Flutter en ligne