28/4/2020 Navegación entre pantallas en Flutter en Curso Avanzado de Flutter
4.461 pts Menú
Curso Avanzado de Flutter
Artículo
Navegación entre pantallas en Flutter
anncode 27 de Mayo de 2019
Navegar de una pantalla a otra
Comenzaremos viendo el ejemplo más simple.
25
Recuerda que pensar en manejar la navegación en utter signi ca que estamos en un stack, por
26
lo tanto si quiero pasar de una pantalla a otra deberé añadir un elemento al stack, esto lo hago
con la opción push de la siguiente manera.
27
Navigator.push(
28 context,
MaterialPageRoute(builder: (context) => SecondRoute()),
29
);
30
Ahora imagina que queremos regresar, esto signi cará sacar la pantalla de la pila en este caso
no es necesario llamar directamente al archivo sino únicamente usar la función pop de la clase
31 Widget Text Appbar persona…
Navigator .
https://platzi.com/clases/1603-flutter-avanzado/20600-navegacion-entre-pantallas-en-flutter/ 1/6
28/4/2020 Navegación entre pantallas en Flutter en Curso Avanzado de Flutter
32
Navigator.pop(context);
33
Navegar de una pantalla a otra con parámetros
34
Podemos enviar de una pantalla a otra desde un dato sencillo hasta un objeto entero,
simplemente usando el método constructor de la clase a dónde queremos llevar el dato.
Podemos hacerlo de la siguiente forma:
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => DetailScreen(place: places[index]),
),
);
Navegar de una pantalla a otra volver y obtener un resultado
Esta acción no es tan utilizada pero te dejo el dato sobre cómo funciona y la explicación de un
caso de uso para que tengas más contexto de en qué casos se puede usar:
Imagina una pantalla que tiene dos botones ambos activan dos menús, el requerimiento es que
la al clickear cualquiera de los botones abra el menú y luego regrese a la pantalla anterior con el
resultado de lo seleccionado en el menú.
Widget Text Appbar persona…
https://platzi.com/clases/1603-flutter-avanzado/20600-navegacion-entre-pantallas-en-flutter/ 2/6
28/4/2020 Navegación entre pantallas en Flutter en Curso Avanzado de Flutter
Este tipo de actividad se conoce como obtener el resultado de la pantalla y lo podemos lograr
de la siguiente forma:
1. Ir a la pantalla de opciones
onPressed: () {
_navigateAndDisplaySelection(context);
},
2. En la pantalla de opciones tener asignado el accionable de esta forma
Navigator.pop(context, "Opción Seleccionada");
Esto hará que automáticamente al ir de regreso a la pantalla inicial llegué directamente a este
método, para obtener el resultado:
_navigateAndDisplaySelection(BuildContext context) async {
final result = await Navigator.push(
context,
MaterialPageRoute(builder: (context) => SelectionScreen()),
);
}
Widget Text Appbar persona…
Navegación con rutas
https://platzi.com/clases/1603-flutter-avanzado/20600-navegacion-entre-pantallas-en-flutter/ 3/6
28/4/2020 Navegación entre pantallas en Flutter en Curso Avanzado de Flutter
Cuando estamos navegando recurrentemente a la misma pantalla desde otras, puede provocar
la duplicación del código. En esos casos es más recomendable utilizar la navegación por rutas.
Para lograr esto lo primero que debemos hacer es desde el Widget MaterialApp() declarar las
rutas de la siguiente forma:
MaterialApp(
initialRoute: '/',
routes: {
'/': (context) => FirstScreen(),
'/second': (context) => SecondScreen(),
'/third': (context) => ThirdScreen(),
},
);
Una vez declaradas ya podemos navegar de esta forma:
Navigator.pushNamed(context, '/second');
Y regresar a la pantalla anterior usando la misma sentencia pop
Navigator.pop(context);
Escribe aquí tu pregunta +2
Widget Text Appbar persona…
https://platzi.com/clases/1603-flutter-avanzado/20600-navegacion-entre-pantallas-en-flutter/ 4/6
28/4/2020 Navegación entre pantallas en Flutter en Curso Avanzado de Flutter
MatiasHarder Estudiante · hace 3 meses
Buen contenido! Muchas gracias por este gran curso! 😄
2
waldirrocabado Estudiante · hace 7 meses
Esta navegacion solo se usa para las screens que llevan datos? y como se diferencia de la navegacion que estabamos
teniendo de ir de home a pro le. y the el sign in a home.
3
ErikaPM · hace 4 meses
La diferencia es que en el código que teníamos anteriormente para navegar entre pestañas se hacía llamando los screen
desde la barra de navegación de Cupertino, en la documentación que nos presentan ahora explican como navegar en
múltiples pestañas que van a estar “apiladas” una sobre otra, así puedes acceder a ellas por su posición, es similar al uso
de un array.
Bob · hace 20 días
Según entiendo, la barra de navegació junto con sus 3 views son en conjunto UNA sola PANTALLA. Para alternar entre los
diferentes views/bodys de la pantalla, se usan los taps de la barra.
El sign in screen y add_place son cada uno UNA PANTALLA. Para navegar entre las 3 PANTALLAS usamos la clase
Navigator. También he notado que para saber que estamos de niendo una nueva pantalla, se empieza usando el widget
SCAFFOLD, que MaterialApp exige a todas las pantallas.
Ver más respuestas
Widget Text Appbar persona…
https://platzi.com/clases/1603-flutter-avanzado/20600-navegacion-entre-pantallas-en-flutter/ 5/6
