Creación de Rutas con Parámetros Opcionales y Argumentos en Flutter

Tiempo de lectura: 3 minutos

En Flutter, las rutas permiten la navegación entre pantallas dentro de tu aplicación. A veces, necesitas pasar datos de una pantalla a otra, ya sea a través de parámetros opcionales en la URL o mediante argumentos que se pasan directamente al momento de la navegación.

Paso 1: Configuración Inicial

Antes de empezar, asegúrate de tener una aplicación Flutter básica configurada. Si no tienes una, puedes crear una nueva usando el siguiente comando:

flutter create rutas_flutter

Abre tu proyecto en tu editor de código favorito (por ejemplo, Visual Studio Code).

Paso 2: Definiendo las Rutas en MaterialApp

Dentro del widget MaterialApp, puedes definir rutas estáticas usando la propiedad routes, o dinámicas y más flexibles utilizando onGenerateRoute. En este tutorial, usaremos onGenerateRoute para manejar rutas con parámetros opcionales y argumentos.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Tutorial Rutas con Parámetros',
      debugShowCheckedModeBanner: false,
      initialRoute: '/home',
      onGenerateRoute: (settings) {
        final uri = Uri.parse(settings.name ?? '');

        switch (uri.path) {
          case '/home':
            return MaterialPageRoute(builder: (context) => HomeScreen());

          case '/details':
            // Ejemplo de argumentos
            final arguments = settings.arguments as Map<String, dynamic>?; 
            final id = arguments?['id'] as int?;

            // Ejemplo de parámetro de consulta
            final name = uri.queryParameters['name'];

            return MaterialPageRoute(
              builder: (context) => DetailScreen(
                id: id,
                name: name,
              ),
            );

          default:
            return MaterialPageRoute(builder: (context) => NotFoundScreen());
        }
      },
    );
  }
}

Paso 3: Creando las Pantallas

Vamos a crear tres pantallas simples: HomeScreen, DetailScreen y NotFoundScreen.

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Screen'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                // Navegando con argumentos
                Navigator.pushNamed(
                  context,
                  '/details',
                  arguments: {'id': 42},
                );
              },
              child: Text('Ir a Detalles con ID 42'),
            ),
            ElevatedButton(
              onPressed: () {
                // Navegando con parámetro de consulta
                Navigator.pushNamed(context, '/details?name=Flutter');
              },
              child: Text('Ir a Detalles con nombre Flutter'),
            ),
          ],
        ),
      ),
    );
  }
}

class DetailScreen extends StatelessWidget {
  final int? id;
  final String? name;

  const DetailScreen({Key? key, this.id, this.name}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Detail Screen'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('ID: ${id ?? 'No proporcionado'}'),
            Text('Nombre: ${name ?? 'No proporcionado'}'),
          ],
        ),
      ),
    );
  }
}

class NotFoundScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('404 - Página no encontrada'),
      ),
      body: Center(
        child: Text('La ruta no existe.'),
      ),
    );
  }
}

Paso 4: Navegación y Manejo de Parámetros

Navegación con Argumentos

En HomeScreen, hemos añadido un botón que navega a la pantalla de detalles pasando un argumento id.

ElevatedButton(
  onPressed: () {
    // Navegando con argumentos
    Navigator.pushNamed(
      context,
      '/details',
      arguments: {'id': 42},
    );
  },
  child: Text('Ir a Detalles con ID 42'),
),

En onGenerateRoute, extraemos los argumentos usando settings.arguments:

final arguments = settings.arguments as Map<String, dynamic>?; 
final id = arguments?['id'] as int?;

Navegación con Parámetros de Consulta

Otro botón en HomeScreen navega a la pantalla de detalles utilizando un parámetro de consulta name:

ElevatedButton(
  onPressed: () {
    // Navegando con parámetro de consulta
    Navigator.pushNamed(context, '/details?name=Flutter');
  },
  child: Text('Ir a Detalles con nombre Flutter'),
),

En onGenerateRoute, extraemos este parámetro usando Uri.parse:

final name = uri.queryParameters['name'];

Paso 5: Ejecuta la Aplicación

Guarda todos los archivos y ejecuta la aplicación:

flutter run

Deberías poder navegar entre la pantalla de inicio y la pantalla de detalles, viendo los diferentes métodos de pasar y recibir datos.