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.
Ingeniero en Informática, me encanta crear cosas o arreglarlas y darles una nueva vida. Escritor y poeta. Más de 20 APPs publicadas y un libro en Amazon.