Navegación entre Pantallas en Flutter

Las aplicaciones modernas suelen requerir múltiples pantallas para organizar sus funcionalidades de manera eficiente. Aquí exploraremos cómo crear una nueva pantalla en Flutter, navegar entre ellas y pasar datos de una a otra, logrando una experiencia de usuario dinámica.

¿Cómo se crea una nueva pantalla en Flutter?

• Crea un archivo para la nueva pantalla, por ejemplo, recipe_detail.dart.
• Define un StatefulWidget llamado RecipeDetail para mantener el estado de la pantalla.
• Importa el paquete material.dart para acceder a las herramientas de diseño de Flutter.
• Usa un Scaffold para estructurar la página:
  • Incluye una AppBar con un botón que permita regresar a la pantalla anterior.
  • Agrega un ícono, como Icons.arrow_back, configurado con un color contrastante para destacarlo.

Código clave:

AppBar(
  leading: IconButton(
    icon: Icon(Icons.arrow_back, color: Colors.white),
    onPressed: () => Navigator.pop(context),
  ),
  backgroundColor: Colors.orange,
  title: Text('Detalle de Receta'),
)

¿Cómo se navega desde la pantalla principal a la nueva pantalla?

1. Usa un GestureDetector para capturar eventos de clic en elementos como tarjetas o botones.
2. Implementa la función Navigator.push() para redirigir al usuario:
   • Define un MaterialPageRoute que apunta a la nueva pantalla.
   • Asegúrate de importar el archivo correspondiente.

Código clave:

GestureDetector(
  onTap: () {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => RecipeDetail(recipeName: 'Lasaña')),
    );
  },
  child: Card(
    child: Text('Ver detalle'),
  ),
)

¿Cómo se pasa información entre pantallas?

• Define un constructor en la nueva pantalla para recibir datos, como el nombre de una receta.
• Usa el modificador final para garantizar que los datos sean inmutables.
• Muestra la información recibida en un widget, como un Text.

Código clave:

class RecipeDetail extends StatelessWidget {
  final String recipeName;

  const RecipeDetail({Key? key, required this.recipeName}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(recipeName),
        backgroundColor: Colors.orange,
      ),
      body: Center(
        child: Text('Receta: $recipeName'),
      ),
    );
  }
}

¿Cómo asegurar la navegación inversa?

• Implementa el método Navigator.pop(context) en el botón de regreso.
• Flutter maneja automáticamente el historial de navegación, asegurando que el usuario pueda regresar sin complicaciones.

¿Qué podemos lograr con esta funcionalidad?

• Crear pantallas dinámicas que presenten detalles específicos basados en datos enviados desde la pantalla principal.
• Facilitar una navegación fluida entre secciones de la aplicación, mejorando la usabilidad.