La navegación entre pantallas

La navegación entre pantallas es un aspecto fundamental en el desarrollo de aplicaciones de Flutter. Imaginemos una aplicación móvil típica: al iniciar sesión, pasamos a un feed principal, luego a un perfil de usuario, y así sucesivamente. Flutter proporciona herramientas robustas para gestionar este flujo de pantallas de manera eficiente y elegante.

Conceptos Básicos

• Ruta: Representa una pantalla específica dentro de nuestra aplicación. Cada ruta tiene una clave única que la identifica.
• Navigator: Es la clase principal que gestiona la navegación entre rutas. Piensa en él como un stack (pila) donde se apilan las rutas a medida que el usuario navega.
• MaterialPageRoute: Un tipo de ruta que se utiliza comúnmente para crear nuevas pantallas.

Mecánica de la Navegación

1. Creación de Rutas:

   • Definimos una nueva ruta creando una clase que extienda de StatelessWidget o StatefulWidget.
   • Esta clase contendrá el diseño y la lógica de la pantalla.

2. Empujando una Nueva Ruta:

   • Utilizamos el método Navigator.push para añadir una nueva ruta a la pila.
   • Este método toma como argumento un objeto Route, típicamente un MaterialPageRoute.

3. Volviendo a la Ruta Anterior:

   • El método Navigator.pop se utiliza para eliminar la ruta actual de la pila y volver a la anterior.

Ejemplo Práctico

Dart

import 'package:flutter/material.dart';

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(   
      appBar: AppBar(
        title: Text('Primera Pantalla'),
      ),
      body: Center(
        child: ElevatedButton(
          child:    Text('Ir a la Segunda Pantalla'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondScreen()),
            );
          },
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget    {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Segunda Pantalla'),
      ),
      body: Center(
        child: ElevatedButton(
          child:    Text('Volver'),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}

Aspectos Avanzados

• Pasando Datos Entre Rutas: Podemos pasar datos entre rutas utilizando argumentos en el MaterialPageRoute.
• Navegación Nombrada: Permite navegar a rutas específicas por su nombre en lugar de usar un contexto.
• Gestores de Rutas: Para aplicaciones más complejas, podemos utilizar gestores de rutas como RouteObserver para escuchar cambios en la navegación.
• Paquetes de Navegación: Existen paquetes como go_router que ofrecen funcionalidades adicionales y simplifican la gestión de rutas.

En Resumen

La navegación en Flutter es un mecanismo poderoso y flexible que permite crear aplicaciones con múltiples pantallas interconectadas. Al comprender los conceptos básicos y las técnicas avanzadas, podrás diseñar interfaces de usuario intuitivas y fáciles de usar.