El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Rutas Nombradas

Siguiente ►
►

En Flutter, la navegación entre pantallas (o rutas) es una parte fundamental del desarrollo de aplicaciones. Las rutas nombradas proporcionan una forma más estructurada y mantenible de manejar la navegación en tu aplicación. En este tema, aprenderás cómo definir y utilizar rutas nombradas en Flutter.

¿Qué son las Rutas Nombradas?

Las rutas nombradas son identificadores únicos que se asignan a las pantallas de tu aplicación. En lugar de crear una nueva instancia de una pantalla cada vez que navegas, puedes definir todas tus rutas en un solo lugar y referenciarlas por su nombre.

Ventajas de las Rutas Nombradas

  • Mantenibilidad: Centraliza la definición de rutas, facilitando la gestión y actualización.
  • Claridad: Hace que el código de navegación sea más legible y comprensible.
  • Reutilización: Permite reutilizar rutas en diferentes partes de la aplicación sin duplicar código.

Configuración de Rutas Nombradas

Para configurar rutas nombradas en tu aplicación Flutter, sigue estos pasos:

  1. Define las rutas en el MaterialApp: Utiliza la propiedad routes del widget MaterialApp para definir un mapa de rutas.
  2. Navega usando Navigator.pushNamed: Utiliza el método Navigator.pushNamed para navegar a una ruta específica.

Ejemplo Práctico

Vamos a crear una aplicación simple con dos pantallas: HomeScreen y DetailScreen. Navegaremos entre estas pantallas utilizando rutas nombradas.

Paso 1: Definir las Rutas

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Named Routes Demo',
      // Definimos las rutas aquí
      routes: {
        '/': (context) => HomeScreen(),
        '/details': (context) => DetailScreen(),
      },
      initialRoute: '/',
    );
  }
}

Paso 2: Crear las Pantallas

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // Navegamos a la pantalla de detalles usando la ruta nombrada
            Navigator.pushNamed(context, '/details');
          },
          child: Text('Go to Details'),
        ),
      ),
    );
  }
}

class DetailScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Detail Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // Volvemos a la pantalla anterior
            Navigator.pop(context);
          },
          child: Text('Go Back'),
        ),
      ),
    );
  }
}

Explicación del Código

  • MaterialApp: El widget MaterialApp es el contenedor principal de la aplicación. Aquí definimos las rutas en la propiedad routes.
  • routes: Es un mapa donde las claves son los nombres de las rutas y los valores son funciones que devuelven los widgets correspondientes.
  • initialRoute: Especifica la ruta inicial que se muestra cuando la aplicación se inicia.
  • Navigator.pushNamed: Navega a la ruta especificada por su nombre.
  • Navigator.pop: Vuelve a la pantalla anterior en la pila de navegación.

Pasando Datos Entre Pantallas

A menudo, necesitarás pasar datos entre pantallas. Con las rutas nombradas, puedes hacerlo utilizando la propiedad arguments de Navigator.pushNamed.

Ejemplo Práctico con Datos

Vamos a modificar el ejemplo anterior para pasar un mensaje desde HomeScreen a DetailScreen.

Paso 1: Modificar la Navegación

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // Pasamos datos a la pantalla de detalles
            Navigator.pushNamed(
              context,
              '/details',
              arguments: 'Hello from HomeScreen!',
            );
          },
          child: Text('Go to Details'),
        ),
      ),
    );
  }
}

Paso 2: Recibir los Datos en la Pantalla de Destino

class DetailScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Recibimos los argumentos
    final String message = ModalRoute.of(context)!.settings.arguments as String;

    return Scaffold(
      appBar: AppBar(
        title: Text('Detail Screen'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(message),
            ElevatedButton(
              onPressed: () {
                Navigator.pop(context);
              },
              child: Text('Go Back'),
            ),
          ],
        ),
      ),
    );
  }
}

Explicación del Código

  • arguments: La propiedad arguments de Navigator.pushNamed permite pasar datos a la ruta de destino.
  • ModalRoute.of(context)!.settings.arguments: Recupera los argumentos en la pantalla de destino.

Ejercicio Práctico

Ejercicio

  1. Crea una nueva pantalla llamada ProfileScreen.
  2. Define una ruta nombrada para ProfileScreen.
  3. Navega a ProfileScreen desde HomeScreen pasando un nombre de usuario como argumento.
  4. Muestra el nombre de usuario en ProfileScreen.

Solución

Paso 1: Definir la Ruta

routes: {
  '/': (context) => HomeScreen(),
  '/details': (context) => DetailScreen(),
  '/profile': (context) => ProfileScreen(),
},

Paso 2: Crear ProfileScreen

class ProfileScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final String username = ModalRoute.of(context)!.settings.arguments as String;

    return Scaffold(
      appBar: AppBar(
        title: Text('Profile Screen'),
      ),
      body: Center(
        child: Text('Username: $username'),
      ),
    );
  }
}

Paso 3: Navegar a ProfileScreen

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pushNamed(
              context,
              '/profile',
              arguments: 'JohnDoe',
            );
          },
          child: Text('Go to Profile'),
        ),
      ),
    );
  }
}

Conclusión

Las rutas nombradas en Flutter proporcionan una forma estructurada y mantenible de manejar la navegación en tu aplicación. Al definir todas las rutas en un solo lugar y utilizar nombres para referenciarlas, puedes hacer que tu código sea más claro y fácil de mantener. Además, pasar datos entre pantallas es sencillo y directo utilizando la propiedad arguments.

En el próximo tema, exploraremos cómo pasar datos entre pantallas de manera más detallada y cómo manejar la navegación más avanzada en Flutter.

◄ Anterior
◄
Siguiente ►
►

Curso de Desarrollo con Flutter

Módulo 1: Introducción a Flutter

Módulo 2: Conceptos Básicos de Programación en Dart

Módulo 3: Widgets en Flutter

Módulo 4: Gestión de Estado

Módulo 5: Navegación y Enrutamiento

Módulo 6: Redes y APIs

Módulo 7: Persistencia y Almacenamiento

Módulo 8: Conceptos Avanzados de Flutter

Módulo 9: Pruebas y Depuración

Módulo 10: Despliegue y Mantenimiento

Módulo 11: Flutter para Web y Escritorio

El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados