Volver con un botón
Parte de la sección Listas y pantallas del Journey de Flutter de Coddy. Lección 20 de 33.
La flecha hacia atrás no es la única forma de volver. Un botón Guardar o Listo también debería cerrar su pantalla al pulsarlo. Navigator.pop quita la pantalla superior de la pila, igual que la flecha hacia atrás:
ElevatedButton(
onPressed: () {
Navigator.pop(context);
},
child: const Text('Save'),
)Push y pop forman una pareja: push añade una pantalla y pop la quita. Volver a hacer push de la pantalla de inicio no te llevaría atrás. Añadiría una segunda pantalla de inicio encima de la pila, con una flecha hacia atrás que lleva a la configuración.
Desafío
FácilEl botón Save de la pantalla de configuración no hace nada. Haz que cierre la pantalla de configuración y vuelva a la pantalla de inicio con Navigator.pop.
Pruébalo tú mismo
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'),
),
),
);
}
}
Esta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.
Todas las lecciones de Listas y pantallas
1Listas con desplazamiento
Una lista desplazableElementos de listaAl principio y al finalToca un elemento de listaSeparadores entre filas5Más de una pantalla
Abrir una nueva pantallaLa flecha de retrocesoVolver con un botónEnviar datos a una pantallaRecibir un resultado3Tarjetas y cuadrículas
Tarjetas en una listaUna cuadrícula de mosaicosUna cuadrícula creada con un constructor6Pestañas, cajones y deslizamientos
Pestañas con una barra de navegaciónIconos rellenos para la pestaña abiertaUn cajón lateralDeslizar para eliminarDeshacer un deslizamientoPractica por tu cuenta: Compilador de Flutter online