Cualquier aplicación móvil de la vida real que desarrollemos requiere cambiar entre dos o más pantallas. Por ejemplo, en una aplicación de redes sociales, mostramos una lista de perfiles de usuario. Cuando el usuario hace clic en cualquier perfil, queremos redirigirlo a una nueva página que muestra el perfil detallado de ese usuario en particular y muchos más casos de uso. En este artículo, aprenderemos sobre los diferentes métodos de navegación entre pantallas en Flutter y en qué se diferencian entre sí.
Tenga en cuenta que las pantallas en Flutter se llaman rutas, pero para simplificar, usaré la palabra página para referirse a las pantallas. Flutter usa la clase de navegación para la navegación. Hay cinco métodos en la clase de navegación que discutiremos en este artículo:
- Navigator.push()
- Navigator.pop()
- Navigator.pushReplacement()
- Navigator.pushAndRemoveUntil()
- Navigator.popUntil()
Cuando estamos creando una aplicación como una aplicación de compras en línea, queremos mostrar los detalles de un artículo en una nueva página cuando el usuario selecciona un artículo de una lista y también queremos volver a la página principal cuando el usuario hace clic atrás. Esto se puede implementar usando los métodos:
- Navigator.push()
- Navigator.pop()
La clase Navigator proporciona todas las capacidades de navegación en una aplicación Flutter.
Navigator proporciona métodos para mutar la pila agregando y removiendo páginas de la misma mediante los métodos señalados anteriormente. El método Navigator.push es para navegar a una página más nueva y Navigator.pop es para regresar desde la página actual.
Estos son ejemplos básicos de pop y push: el método push toma BuildContext como primer argumento y el segundo argumento es PageBuilder. Este ejemplo usa MaterialPageRoute, que proporciona la animación de transición y maneja los cambios de ruta:
Podemos comparar la navegación en Flutter con el funcionamiento de la estructura de datos de la pila.
El método Navigator.push() empuja una nueva página en la parte superior de la página actual.
Por ejemplo, usando el método push, hemos insertado 5 páginas en la pila una tras otra. Ahora, cuando hagamos clic en el botón Atrás, actuará como una operación emergente. Nos llevará a las páginas anteriores; la sintaxis para usar la misma es:
Navigator.push(context, MaterialPageRoute(builder: (context) => NewScreen()));Como se discutió anteriormente, Navigator.pop() es similar a la operación pop en una pila. Si estamos en la quinta página, pop() nos llevará a la cuarta página, luego a la tercera, luego a la segunda y así sucesivamente.
El método pop() se puede utilizar para proporcionar un botón de retroceso dentro de nuestra aplicación. la sintaxis es:
Navigator.pop (contexto);Si está creando una página de inicio de sesión de usuario, y cuando el usuario inicia sesión, lo llevará a la página de inicio. Pero ahora, si el usuario vuelve a hacer clic, lo llevará a la página de inicio de sesión nuevamente si usamos Navigator.push(). Entonces usamos otro método, Navigator.pushReplacement(). Eliminará la página actual de la pila y la reemplazará con la nueva página que queremos mostrar.
Puede visualizarse como una secuencia de pop seguida de una operación de empujar en una pila. La sintaxis de la misma es:
Navigator.pushReplacement(context, MaterialPageRoute(builder: (context) => NewScreen()));Cuando implementamos la función de cierre de sesión, deberíamos eliminar todas las páginas de la pila y dirigirnos a la página de inicio de sesión. Aquí no podemos usar el método pushReplacement() ya que solo reemplaza la página superior y otras páginas permanecerán en la pila tal como están.
Deberíamos usar el método Navigator.pushAndReplaceUntil () que eliminará todas las páginas de la pila y mostrará la página especificada. En la pila, se puede ver como hacer estallar elementos hasta que la pila esté vacía y luego empujar un nuevo elemento. La sintaxis es:
Navigator.pushAndRemoveUntil(MaterialPageRoute(builder: (BuildContext context) => NewScreen()), ModalRoute.withName(‘/’), );Al implementar una funcionalidad como la pasarela de pago, después del pago exitoso, queremos enviar al usuario de regreso a la página anterior a la página de pago. Podemos usar el método Navigator.popUntil (), que eliminará páginas de la pila hasta que lleguemos a una página específica.
La sintaxis de la misma es:
Navigator.of(context)
.popUntil(ModalRoute.withName("/NewScreen"));¿Cómo pasar los datos entre páginas usando navigator.push?
En los ejemplos anteriores, navegamos de una página a otra página, pero no pasamos ningún dato a otra página, por lo que para pasar los datos entre una o dos páginas, necesitamos pasar parámetros adicionales a Navigator como se muestra a continuación.
Navigator.pushNamed(context, '/NewScreen',arguments:{"id":25,"name":"Pepe"});Rutas con nombre
Las rutas con nombre le permiten cambiar la ruta mediante el uso de cadenas en lugar de proporcionar clases de componentes, lo que a su vez le permite reutilizar el código.
Las rutas con nombre se definen como un mapa en MaterialApp. Estas rutas se pueden utilizar desde cualquier parte de la aplicación.
Definición de rutas
La ruta es un mapa con claves de cadena y valores como constructores que se pasan a la propiedad de rutas en MaterialApp:
void main() {
runApp(MaterialApp(
title: 'My App',
home: Main(),
// Routes defined here
routes: {
"page":(context)=>PageRoute()
},
));
}Uso de rutas con nombre
En lugar de push, pushNamed se usa para cambiar a una nueva ruta. De manera similar, *pushReplacementNamed* se usa en lugar de pushReplacement. El método pop es el mismo para todas las rutas.
class Main extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Main Route'),
),
body: Center(
child:RaisedButton(
child: Text('Open route'),
onPressed: () {
Navigator.pushReplacementNamed(context, "page");
},
),
),
);
}
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter