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.
Défi
FacileLe 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'),
),
),
);
}
}
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
1Listes défilantes
Une liste qui défileÉléments de listeDébut et finAppuyer sur un élément de listeSéparateurs entre les lignes2Des listes à partir de données
Construire des lignes avec un générateurNuméroter les lignesLignes avec séparateurs5Plus d’un écran
Ouvrir un nouvel écranLa flèche de retourRevenir avec un boutonEnvoyer des données à un écranRécupérer un résultatEntraînez-vous par vous-même : Compilateur Flutter en ligne